A feature you often need in forms is a connected country and region dropdown, where the region field gets automatically updated when the user selects a country. Coding this is easy of course, but it's a royal pain having to track down all the raw country-region data. This script contains a pair of components to let you add this feature quickly and easily to your forms. It's the React version of this script.

It's pretty versatile:

• Has two separate components (<CountryDropdown />, <RegionDropdown>) that you can embed in your DOM wherever you need. That sounded like a vulgar euphemism, but it wasn't, honest.
• Let's you customize the list of countries that appears via a whitelist, blacklist, or even custom build to keep file size down.
• Works as ES6 module, commonJS, AMD, whatever you fancy.
• Lots of options for the most common use-cases, allowing you style is as you need (via classes/IDs), change name attributes, add you own custom onChange handlers to do whatever you want etc.

Check out the github pages section for some examples + example JSX code.

• React (tested with 15.1.0, but should work on earlier versions).
• If you want to run the repo locally (e.g. generated

Ah, modern web development: so many choices! Here's how to install it with the most common build tools:

npm install react-country-region-selector --save

bower install react-country-region-selector 

Just use the dist/rcrs.min.js file.

Here are a few examples in a few different formats.

• ES6 with JSX
• ES5 with JSX
• AMD

I figure people not using JSX will know how to remove the JSX from the code below, if not open a ticket and I'll write up a non-JSX example too.

import React from 'react';
import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';


class Example extends React.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>
    );
  }
}

// Up to you to include React + the react-country-region-selector (script tags, commonJS, whatever). 
// That's a choice you need to make with your build setup.

var Example = React.createClass({
  getInitialState: function () {
    return {
      region: '',
      country: '',
    };
  },

  selectCountry: function (val) {
    this.setState({ country: val });
  },

  selectRegion: function (val) {
    this.setState({ region: val });
  },

  render () {
    return (
      <div>
        <CountryDropdown
          value={this.state.country}
          onChange={this.selectCountry} />
        <RegionDropdown
          country={this.state.country}
          value={this.state.region}
          onChange={this.selectRegion} />
      </div>
    );
  }
}

define([
  'react',
  'react-country-region-selector'
], function (React, rcrs) {

  var CountryDropdown = rcrs.CountryDropdown;
  var RegionDropdown = rcrs.CountryDropdown;

  var Example = React.createClass({
    getInitialState: function () {
      return {
        region: '',
        country: '',
      };
    },

    selectCountry: function (val) {
      this.setState({ country: val });
    },

    selectRegion: function (val) {
      this.setState({ region: val });
    },

    render () {
      return (
        <div>
          <CountryDropdown
            value={this.state.country}
            onChange={this.selectCountry} />
          <RegionDropdown
            country={this.state.country}
            value={this.state.region}
            onChange={this.selectRegion} />
        </div>
      );
    }
  }

  return Example;
});

<CountryDropdown />

<RegionDropdown />

• Page charset: your page will need an appropriate charset to handle UTF-8 chars used in some country names. So if you see some invalid characters appearing in the dropdown, make sure you have UTF-8 specified in your page <head>, like so: <meta charset="UTF-8">
• Data source: the list of countries and regions is maintained separately and pulled from the country-region-data repo.

• gulp - regenerate everything.
• gulp --countries="UK,US" - generate a custom build of the script in the /lib and /dist folder containing only those countries you specify here. This seriously reduces file size (60KB down to as small as 16KB), so if you can do it, do it.

This repo uses the extremely handy react-component-gulp-tasks script for doing most of the gulp tasks (ES6, JSX conversion, UMD file creation, minifications, watchers, etc.). Big thanks to Jed Watson there.

• 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.

MIT.