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
npm install react-select-country-list --save
or
yarn add react-select-country-list
Example
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 <Select options={options} value={value} onChange={changeHandler} />
}
export default CountrySelector
Methods
All input is case-insensitive.
getValue(label)
Expects the English country name.
Returns the code for that country.
If not found, it returns undefined.
getLabel(value)
Expects a two-digit country code.
Returns the name for that country.
If not found, it returns undefined.
getValues()
Returns an array of all country codes.
getLabels()
Returns an array of all country names.
getValueList()
Returns a key-value object of all countries using the code as key.
getLabelList()
Returns a key-value object of all countries using the name as key.
getData()
Returns an array of all country information, in the same format as it gets imported.
setLabel(value, label)
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
// Make 'Viet Nam' -> 'Vietnam'
countries.setLabel('VN', 'Vietnam').getLabel('VN') // 'Vietnam'
setEmpty(label)
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
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.
countries.setLabel('VN', 'Vietnam').setEmpty('Select a Country').getLabel('VN') // 'Vietnam'
native()
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
countries.native().getLabel('TW') // 臺灣
License
MIT
