React + Emoji Phone Country Code Selector

🇦🇷 🇺🇸 🇩🇪 🇯🇵 🇰🇷 🇨🇳 🇮🇳 🇫🇷 🇪🇸 🇮🇹 🇷🇺

This is a React component that generates a pure html <select> element populated with a list of countries and their respective country codes.

In practice, there are countries with more than one code, and codes in more than one country (N:N).

Example

Usage

Download and declare the dependency with the command

npm i react-emoji-country-code-selector

or

yarn add react-emoji-country-code-selector

In your code, import the component like this:

1import {HtmlEmojiCountryCodeSelector} from "react-emoji-country-code-selector";

Or if your project doesn't support ES6

1const HtmlEmojiCountryCodeSelector = require("react-emoji-country-code-selector").HtmlEmojiCountryCodeSelector;

Then, use it as follows. Notice that this component accepts all the same properties of a regular <select> element. The 2 added properties are all optional

1// Example 1
2<HtmlEmojiCountryCodeSelector/>;
3
4// Example 2
5<HtmlEmojiCountryCodeSelector
6    defaultValue={"+1"}
7    generateValue={(data) => data.code}
8    generateLabel={(data) => `${data.ISO} ${data.flag} ${data.code}`}
9>
10    <option>Select your country code</option>
11</HtmlEmojiCountryCodeSelector>;
12    
13// Example 3
14<HtmlEmojiCountryCodeSelector
15    defaultValue={"US"}
16    generateValue={(data) => data.ISO}
17>
18</HtmlEmojiCountryCodeSelector>;

---

Note: The dataset can also be imported individually

1import {dataset} from "react-emoji-country-code-selector";

or

1const dataset = require("react-emoji-country-code-selector").dataset;

Collaboration

Feel free to fork the repository, modify it, and push back code to this repo.

I'll be happy to review any type of pull request!