117 lines
2.6 KiB
Markdown
117 lines
2.6 KiB
Markdown
# react-select-country-list
|
|
|
|
This package take [country-list](https://github.com/fannarsh/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 <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
|
|
```js
|
|
// 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
|
|
```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'
|
|
```
|
|
|
|
### 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](https://annexare.github.io/Countries/)
|
|
|
|
#### Usage
|
|
```js
|
|
countries.native().getLabel('TW') // 臺灣
|
|
```
|
|
|
|
|
|
## License
|
|
|
|
MIT
|