react-select-country-list

This package take country-list as reference, and make it more friendly to react-select

Maps ISO 3166-1-alpha-2 codes to English country names and match react-select options props.

Uses data from https://www.iso.org/iso-3166-country-codes.html

Install

`` cli
npm install react-select-country-list --save
`
or
` cli
yarn add react-select-country-list
`

Example

`js
import React, { useState, useMemo } from 'react'
import Select from 'react-select'
import countryList from 'react-select-country-list'

function CountrySelector() {
const [value, setValue] = useState('')
const options = useMemo(() => countryList().getData(), [])

const changeHandler = value => {
setValue(value)
}

return
}

export default CountrySelector

`




Methods

All input is case-insensitive.

$3

Expects the English country name.
Returns the code for that country.
If not found, it returns undefined.

$3

Expects a two-digit country code.
Returns the name for that country.
If not found, it returns undefined.

$3

Returns an array of all country codes.

$3

Returns an array of all country names.

$3

Returns a key-value object of all countries using the code as key.

$3

Returns a key-value object of all countries using the name as key.

$3

Returns an array of all country information, in the same format as it gets imported.

$3

Due to different perspectives among different regions, this method can help developers customize the label of specific country. What's more, it can be chained with another methods above.

#### Usage
`js
// Make 'Viet Nam' -> 'Vietnam'
countries.setLabel('VN', 'Vietnam').getLabel('VN') // 'Vietnam'
`

$3

You may want an empty value option in the list, so here's the helper function for you. Again, it can be chained with another methods above.

#### Usage
`js
countries.setEmpty('Select a Country').getLabel('') // 'Select a Country'
`

We can even chain setLabel and setEmpty together to have list with an empty option and the modified label.
`js
countries.setLabel('VN', 'Vietnam').setEmpty('Select a Country').getLabel('VN') // 'Vietnam'
`

$3

You may want to display native name of countries, this is the method for you.
The data source of native names can be found here

#### Usage
`js
countries.native().getLabel('TW') // 臺灣
``

License

MIT

Show more