Gathering detailed insights and metrics for react-select-country-list
Gathering detailed insights and metrics for react-select-country-list
Gathering detailed insights and metrics for react-select-country-list
Gathering detailed insights and metrics for react-select-country-list
@types/react-select-country-list
TypeScript definitions for react-select-country-list
@harcorp/react-select-country-list
Maps ISO 3166-1-alpha-2 codes to English country names and match react-select options props
react-country-state-city
A lightweight and easy-to-use React library that provides a comprehensive list of regions or continents, countries, states, cities languages, and country phone codes for creating dynamic and searchable dropdowns. Ideal for building forms and input fields
dky-select-country-list
Select Country List for React JS
This is the country list data format for react-select
npm install react-select-country-list
Typescript
Module System
Node Version
NPM Version
99.4
Supply Chain
100
Quality
76
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
5,806,875
Last Day
9,145
Last Week
39,744
Last Month
188,688
Last Year
1,871,134
MIT License
55 Stars
38 Commits
37 Forks
5 Watchers
1 Branches
3 Contributors
Updated on Feb 16, 2025
Minified
Minified + Gzipped
Latest Version
2.2.3
Package Id
react-select-country-list@2.2.3
Unpacked Size
35.56 kB
Size
8.16 kB
File Count
6
NPM Version
6.14.8
Node Version
14.15.1
Cumulative downloads
Total Downloads
Last Day
14.1%
9,145
Compared to previous day
Last Week
-7.2%
39,744
Compared to previous week
Last Month
4%
188,688
Compared to previous month
Last Year
18.5%
1,871,134
Compared to previous year
3
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
1npm install react-select-country-list --save
or
1yarn add react-select-country-list
1import React, { useState, useMemo } from 'react' 2import Select from 'react-select' 3import countryList from 'react-select-country-list' 4 5function CountrySelector() { 6 const [value, setValue] = useState('') 7 const options = useMemo(() => countryList().getData(), []) 8 9 const changeHandler = value => { 10 setValue(value) 11 } 12 13 return <Select options={options} value={value} onChange={changeHandler} /> 14} 15 16export default CountrySelector 17
All input is case-insensitive.
Expects the English country name.
Returns the code for that country.
If not found, it returns undefined
.
Expects a two-digit country code.
Returns the name for that country.
If not found, it returns undefined
.
Returns an array of all country codes.
Returns an array of all country names.
Returns a key-value object of all countries using the code as key.
Returns a key-value object of all countries using the name as key.
Returns an array of all country information, in the same format as it gets imported.
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.
1// Make 'Viet Nam' -> 'Vietnam' 2countries.setLabel('VN', 'Vietnam').getLabel('VN') // 'Vietnam'
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.
1countries.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.
1countries.setLabel('VN', 'Vietnam').setEmpty('Select a Country').getLabel('VN') // 'Vietnam'
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
1countries.native().getLabel('TW') // 臺灣
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 3/28 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
48 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-04-21
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More