UNPKG

2.98 kBMarkdownView Raw
1# react-flags
2
3Flags of the world react component
4
5[![Dependency Status][deps-badge]][deps]
6[![devDependency Status][dev-deps-badge]][dev-deps]
7[![peerDependency Status][peer-deps-badge]][peer-deps]
8
9## Options
10
11#### `country`: PropTypes.string (default: `_unknown`)
12
13The ISO 3166-1 alpha-2 or alpha-3 of the country's flag or one of the following:
14 - `_abkhazia`
15 - `_basque-country`
16 - `_british-antarctic-territory`
17 - `_commonwealth`
18 - `_england`
19 - `_kosovo`
20 - `_mars`
21 - `_nagorno-karabakh`
22 - `_nato`
23 - `_northern-cyprus`
24 - `_olympics`
25 - `_red-cross`
26 - `_scotland`
27 - `_somaliland`
28 - `_south-ossetia`
29 - `_united-nations`
30 - `_unknown`
31 - `_wales`
32
33#### `format`: PropTypes.string (default: 32)
34
35 - `png`: square png file.
36 - `icns`: square icns file.
37 - `ico`: square ico file.
38
39#### `pngSize`: PropTypes.number (default: 32)
40
41Size of the flag if we are using the PNG format.
42
43Possible values are:
44 - `16`: 16 pixels
45 - `24`: 24 pixels
46 - `32`: 32 pixels
47 - `48`: 48 pixels
48 - `64`: 64 pixels
49
50#### `shiny`: PropTypes.bool (default: `false`)
51
52Display a shiny of flat flag. Default is a flat flag.
53
54#### `width`: PropTypes.number (default: null)
55
56Width of the flag <img> HTML tag.
57
58#### `height`: PropTypes.number (default: null)
59
60Height of the flag <img> HTML tag.
61
62#### `alt`: PropTypes.string (default: `this.props.name`)
63
64Alternative text of the flag <img> HTML tag.
65
66#### `basePath`: PropTypes.string (default: `/img/flags`)
67
68The base path of where the flags files from the vendor folder are in your project.
69
70## Installation
71
72```bash
73npm install --save react-flags
74```
75You need to copy the content of the `vendor` folder to your local project. The default base path is `/img/flags`
76
77## Usage
78```js
79import React from "react";
80import Flag from "react-flags";
81
82const App = React.createClass({
83 render() {
84 return (
85 <div>
86 <Flag
87 name="CAN"
88 format="png"
89 pngSize={64}
90 shiny={true}
91 alt="Canada Flag"
92 />
93 </div>
94 );
95 }
96});
97
98React.render(<App />, document.body);
99
100```
101
102## Development and testing
103
104```bash
105npm install
106npm start
107```
108
109Then work on the `Flag.jsx` component in `src`.
110
111## Change log
112See the [change log](https://github.com/wiredmax/react-flags/blob/master/CHANGELOG.md).
113
114## Sources
115[GoSquared](https://www.gosquared.com) - [2600 Flag Icon Set](https://www.gosquared.com/resources/flag-icons/)
116
117## Author
118Maxime Poulin <mpoulin@roux.ca>
119
120## License
121MIT (See [LICENSE](https://github.com/wiredmax/react-flags/blob/master/LICENSE))
122
123[deps-badge]: https://david-dm.org/wiredmax/react-flags.svg
124[deps]: https://david-dm.org/wiredmax/react-flags
125
126[dev-deps-badge]: https://david-dm.org/wiredmax/react-flags/dev-status.svg
127[dev-deps]: https://david-dm.org/wiredmax/react-flags#info=devDependencies
128
129[peer-deps-badge]: https://david-dm.org/wiredmax/react-flags/peer-status.svg
130[peer-deps]: https://david-dm.org/wiredmax/react-flags#info=peerDependencies