react-emoji-country-code-selector

Pure html phone country code selector showing country flags as emojis, built as a React component

Stats

StarsIssuesVersionUpdatedCreatedSize
react-emoji-country-code-selector
1.0.3a year agoa year agoMinified + gzip package size for react-emoji-country-code-selector in KB

Readme

Build Status

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

Screenshot

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:

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

Or if your project doesn't support ES6

const 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

// Example 1
<HtmlEmojiCountryCodeSelector/>;

// Example 2
<HtmlEmojiCountryCodeSelector
    defaultValue={"+1"}
    generateValue={(data) => data.code}
    generateLabel={(data) => `${data.ISO} ${data.flag} ${data.code}`}
>
    <option>Select your country code</option>
</HtmlEmojiCountryCodeSelector>;
    
// Example 3
<HtmlEmojiCountryCodeSelector
    defaultValue={"US"}
    generateValue={(data) => data.ISO}
>
</HtmlEmojiCountryCodeSelector>;

Note: The dataset can also be imported individually

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

or

const 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!

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.