https://github.com/chun-lin/react-select-country-list
This is the country list data format for react-select
https://github.com/chun-lin/react-select-country-list
country country-list javascript react react-select
Last synced: 6 months ago
JSON representation
This is the country list data format for react-select
- Host: GitHub
- URL: https://github.com/chun-lin/react-select-country-list
- Owner: Chun-Lin
- License: mit
- Created: 2018-07-27T10:09:42.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T19:33:03.000Z (over 2 years ago)
- Last Synced: 2024-04-26T07:45:34.823Z (over 1 year ago)
- Topics: country, country-list, javascript, react, react-select
- Language: JavaScript
- Homepage:
- Size: 79.1 KB
- Stars: 47
- Watchers: 6
- Forks: 36
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
}
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