react-country-flag

React component for emoji/svg country flags.

Install

1npm install --save react-country-flag

BREAKING CHANGES

v3.x NONE only Typescript Types were introduced, enjoy!

v2.x has breaking changes

• code is now countryCode
• title and aria-label are not defined any more, it is up to the developer to pass these in
• styleProps is now style

Usage

All props are passed onto the element, everything can be overwritten.

1import React from "react"
2import ReactCountryFlag from "react-country-flag"
3
4function ExampleComponent {
5    return (
6        <div>
7            <ReactCountryFlag countryCode="US" />
8
9            <ReactCountryFlag
10                className="emojiFlag"
11                countryCode="US"
12                style={{
13                    fontSize: '2em',
14                    lineHeight: '2em',
15                }}
16                aria-label="United States"
17            />
18
19            <ReactCountryFlag countryCode="US" svg />
20
21            <ReactCountryFlag
22                countryCode="US"
23                svg
24                style={{
25                    width: '2em',
26                    height: '2em',
27                }}
28                title="US"
29            />
30
31            <ReactCountryFlag
32                countryCode="US"
33                svg
34                cdnUrl="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/1x1/"
35                cdnSuffix="svg"
36                title="US"
37            />
38        </div>
39    )
40}
41
42export default ExampleComponent

Detecting Emoji support

Try this out and conditionally render your country flag https://github.com/danalloway/detect-emoji-support

License

MIT © danalloway