1 | # react-flags
|
2 |
|
3 | Flags 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 |
|
13 | The 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 |
|
41 | Size of the flag if we are using the PNG format.
|
42 |
|
43 | Possible 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 |
|
52 | Display a shiny of flat flag. Default is a flat flag.
|
53 |
|
54 | #### `width`: PropTypes.number (default: null)
|
55 |
|
56 | Width of the flag <img> HTML tag.
|
57 |
|
58 | #### `height`: PropTypes.number (default: null)
|
59 |
|
60 | Height of the flag <img> HTML tag.
|
61 |
|
62 | #### `alt`: PropTypes.string (default: `this.props.name`)
|
63 |
|
64 | Alternative text of the flag <img> HTML tag.
|
65 |
|
66 | #### `basePath`: PropTypes.string (default: `/img/flags`)
|
67 |
|
68 | The base path of where the flags files from the vendor folder are in your project.
|
69 |
|
70 | ## Installation
|
71 |
|
72 | ```bash
|
73 | npm install --save react-flags
|
74 | ```
|
75 | You 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
|
79 | import React from "react";
|
80 | import Flag from "react-flags";
|
81 |
|
82 | const 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 |
|
98 | React.render(<App />, document.body);
|
99 |
|
100 | ```
|
101 |
|
102 | ## Development and testing
|
103 |
|
104 | ```bash
|
105 | npm install
|
106 | npm start
|
107 | ```
|
108 |
|
109 | Then work on the `Flag.jsx` component in `src`.
|
110 |
|
111 | ## Change log
|
112 | See 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
|
118 | Maxime Poulin <mpoulin@roux.ca>
|
119 |
|
120 | ## License
|
121 | MIT (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
|