react-country-region-selector
Advanced tools
CountryDropdown and RegionDropdown React components for your forms.
This library provides a pair of React components to display connected country and region dropdowns (pick a country, it shows the relevant regions). If you're not using React, check out the plain vanilla JS version instead. The list of countries and regions is maintained separately and found in the country-region-data repo.
It's pretty versatile.
<CountryDropdown />, <RegionDropdown>) that you can embed in your
DOM wherever you need. That sounded like a vulgar euphemism, but it wasn't, honest.<head>, like so: <meta charset="UTF-8">event.target.value is returned as the first value and the full event as the second.Check out the github pages section for some examples + example JSX code.
Using npm or yarn:
npm i react-country-region-selector
yarn add react-country-region-selector
It's very easy to use, but note that you will need to track the country and region value somewhere - either in your component state or in a store somewhere. Here's a simple example that uses state:
import React, { Component } from 'react';
// note that you can also export the source data via CountryRegionData. It's in a deliberately concise format to
// keep file size down
import { CountryDropdown, RegionDropdown, CountryRegionData } from 'react-country-region-selector';
class Example extends Component {
constructor (props) {
super(props);
this.state = { country: '', region: '' };
}
selectCountry (val) {
this.setState({ country: val });
}
selectRegion (val) {
this.setState({ region: val });
}
render () {
const { country, region } = this.state;
return (
<div>
<CountryDropdown
value={country}
onChange={(val) => this.selectCountry(val)} />
<RegionDropdown
country={country}
value={region}
onChange={(val) => this.selectRegion(val)} />
</div>
);
}
}
Generally you don't need CountryRegionData, but should you need it, the raw data is accessible like in the above example.
These are the attributes that can be passed to the two components. Note: any other attributes that aren't
specified here will be added directly to the <select> DOM element.
<CountryDropdown />
| Parameter | Required? | Default | Type | Description |
|---|---|---|---|---|
| value | Yes | "" | string | The currently selected country. This should either be the shortcode, or the full country name depending on what you're using for your value attribute (see the valueType option). By default it's the full country name. |
| onChange | Yes | - | function | Callback that gets called when the user selects a country. Use this to store the value in whatever store you're using (or just the parent component state). |
| onBlur | No | - | function | Callback that gets called when the user blurs off the country field. |
| name | No | "rcrs-country" | string | The name attribute of the generated select box. |
| id | No | "" | string | The ID of the generated select box. Not added by default. |
| classes | No | "" | string | Any additional space-separated classes you want to add. |
| showDefaultOption | No | true | boolean | Whether you want to show a default option. |
| priorityOptions | No | array | [] | Lets you target countries that should appear at the top of the dropdown. Should also be an array of country shortcodes. |
| defaultOptionLabel | No | "Select Country" | string | The default option label. |
| labelType | No | "full" | string | Either "full" or "short". This governs whether you see country names or country short codes in the dropdown. |
| valueType | No | "full" | string | Either "full" or "short". This controls the actual value attribute of each <option> in the dropdown. Please note, if you set this to "short" you will need to let the corresponding <RegionDropdown /> component know as well, by passing a countryValueType="short" attribute. |
| whitelist | No | [] | array | This setting lets you target specific countries to appear in the dropdown. Only those specified here will appear. This should be an array of country shortcodes. See the country-region-data repo for the data and the shortcodes. |
| blacklist | No | [] | array | Lets you target countries that should not appear in the dropdown. Should also be an array of country shortcodes. |
| disabled | No | false | boolean | Disables the country field. |
<RegionDropdown />
| Parameter | Required? | Default | Type | Description |
|---|---|---|---|---|
| country | Yes | "" | string | The currently selected country. |
| value | Yes | "" | string | The currently selected region. |
| onChange | Yes | - | function | Callback that gets called when the user selects a region. Use this to store the value in whatever store you're using (or just the parent component state). |
| onBlur | No | - | function | Callback that gets called when the user blurs off the region field. |
| name | No | "rcrs-region" | string | The name attribute of the generated select box. |
| id | No | "" | string | The ID of the generated select box. Not added by default. |
| classes | No | "" | string | Any additional space-separated classes you want to add. |
| blankOptionLabel | No | - | string | The label that appears in the region dropdown when the user hasn't selected a country yet. |
| showDefaultOption | No | true | boolean | Whether you want to show a default option. This is what the user sees in the region dropdown after selecting a country. It defaults to the defaultOptionLabel setting (see next). |
| defaultOptionLabel | No | Select Region | string | The default region option. |
| onChange | No | - | function | Called when the user selects a region. Use this to store the region value. |
| countryValueType | No | full | string | If you've changed the country dropdown valueType to short you will need to set this value to short as well, so the component knows what's being passed in the country property. |
| labelType | No | "full" | string | Either "full" or "short". This governs whether you see region names or region short codes in the dropdown. |
| valueType | No | "full" | string | Either "full" or "short". This controls the actual value attribute of each <option> in the dropdown. |
| disableWhenEmpty | No | false | boolean | Disables the region field when the user hasn't selected a country. |
| disabled | No | false | boolean | Disables the region field. If set to true, it overrides disableWhenEmpty |
| customOptions | No | [] | Array<string> | Appends a list of string to the every region dropdown, regardless of the country selected. |
Check out the scripts section of the package.json file to see them all, but these are the highlights:
npm start - regenerate everything, plus a watcher for local development.npm build - build the dist files again. No watcher.rollup -c --config-countries=UK,US - generate a custom build of the script /dist folder containing only those
countries you specify here. This seriously reduces file size, so if you can do it, do it.2.0.0 - Mar 21, 2020
1.4.7 - Dec 24, 2019:
1.4.6 - Dec 22, 2019:
1.4.5 - Oct 9, 2019.
1.4.4 - Aug 2, 2019. Country data updates.1.4.3 - Dev 2, 2018:
1.4.2 - Nov 8, 2018:
customOptions setting added for the Region dropdown.priorityOptions option added to the CountryDropdown to allow placing items at the top of the country dropdown.1.4.1 - Sept 9, 2018: bug fix for invalid JSON data source conversion.1.4.0 - Sept 8, 2018:
dist/rcrs.es.js) and commonJS (dist/rcrs.js) format. This library is intended for use in React applications.style={{ color: 'red' }} and have them output in the
markup)1.3.0 - Mar 20, 2018. Bug fix for invalid country, @n-david! onBlur event added.1.2.3 - Nov 7, 2017. Country data updates. React moved to peer dependency, thanks @iamdey!1.2.2 - Oct 4, 2017 - Update to pass event on change. Thanks @robertnealan!1.2.1 - Sept 6, 2017 - IE11 bug fix.1.2.0 - Aug 7, 2017 - updated country-region-data; dependency updates.1.1.0 - May 18, 2017 - dependency updates. disabled option added to <CountryDropdown /> and <RegionDropdown />.1.0.4 - April 12, 2017 - bug fix. Thanks @bebbi and @tchaffee!1.0.3 - Jan 2, 2016 - updated country-region-data, repo link fix.1.0.2 - October 16, 2016 - Fix issue where source-data.js in lib had no country data.1.0.0 - July 1, 2016 - initial version.The Jest/Enzyme unit tests are found in the src/tests folder. The repo is hooked up to Travis CI to automatically run the tests for each commit.
To run this locally, do the following:
npm installnpm start/example subfolder and do the same: npm install, npm starthttp://localhost:3000 in your browser.Big thanks to a whole boatload of people:
MIT.
FAQs
CountryDropdown and RegionDropdown React components for your forms.
The npm package react-country-region-selector receives a total of 26,993 weekly downloads. As such, react-country-region-selector popularity was classified as popular.
We found that react-country-region-selector demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.