# react-emoji-country-code-selector

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

Latest version **1.0.3** (published 2021-01-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-emoji-country-code-selector
pnpm add react-emoji-country-code-selector
yarn add react-emoji-country-code-selector
bun add react-emoji-country-code-selector
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-01-15 |
| First published | 2021-01-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 336.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Diego Scafati |
| Maintainers | dscafati |
| Keywords | emoji, country code, flags, area code |

## Links

- npm: https://www.npmjs.com/package/react-emoji-country-code-selector
- npm.io page: https://npm.io/package/react-emoji-country-code-selector

## Dependencies (3)

- [babel](https://npm.io/package/babel.md) ^6.23.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.12.11
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.12.10

## Recent versions

- 1.0.3 (latest) — 2021-01-15
- 1.0.2 — 2021-01-15
- 1.0.1 — 2021-01-15
- 1.0.0 — 2021-01-15

## README

[![Build Status](https://travis-ci.com/dscafati/react-emoji-country-code-selector.svg?branch=main)](https://travis-ci.com/dscafati/react-emoji-country-code-selector)

# 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](https://raw.githubusercontent.com/dscafati/react-emoji-country-code-selector/main/screenshot.png)

## 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:

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

Or if your project doesn't support ES6

```javascript
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

```javascript
// 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


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

or

```javascript
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!

---
_Source: https://npm.io/package/react-emoji-country-code-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._