react-country-flag

Install

1npm install --save react-js-country-flags

Result

Usage

Pass the country code or dial_code to get details/flag/flag emoji

1import React from "react"
2import {getFlagsByDialCode,getFlagByCountryName,getFlagEmojiByCountryName,getCountryDetailsByName} from "react-js-country-flags";
3
4function App() {
5
6  const countryList1 = getFlagsByDialCode("+1")
7  const countryList91 = getFlagsByDialCode("+91")
8  return (
9    <div className="App" style={{padding:"10px"}}>
10      <p>Country flag by dial code +1 : {JSON.stringify(countryList1)}</p>
11      {countryList1.map((country)=> <img key={country.dial_code} src={country.flag} style={{height:'30px',width:'30px',marginRight:'10px'}}/>)}
12      <br/>
13
14      <p>Country flag by dial code +91 : {JSON.stringify(countryList91)}</p>
15      {countryList91.map((country)=> <img key={country.dial_code} src={country.flag} style={{height:'30px',width:'30px',marginRight:'10px'}}/>)}
16      <br/>
17
18      <p>Country flag by name US</p>
19       <img src={getFlagByCountryName("US")} style={{height:'30px',width:'30px'}}/>
20      <br/>
21 
22      <p>country Emoji {getFlagEmojiByCountryName("in")}</p>
23
24
25      <p>Country details by name IN : {JSON.stringify(getCountryDetailsByName("in"))}</p>
26     
27      <br/>
28
29    </div>
30  );
31}
32
33export default App;

Detecting Emoji support

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

License

MIT © UdaySubbisetty