Country Region Select For React

The React country/region selector component to create connected country and region dropdowns, where the region field gets automatically updated when the user selects a country.

Installation:

# NPM
$ npm install react-country-region-selector --save

Basic usage:

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

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>
    );
  }
}

Default props.

{

  value: '',
  name: 'rcrs-country',
  id: '',
  classes: '',
  showDefaultOption: true,
  defaultOptionLabel: 'Select Country',
  onChange: () => {},
  labelType: C.DISPLAY_TYPE_FULL,
  valueType: C.DISPLAY_TYPE_FULL,
  whitelist: [],
  blacklist: [],
  disabled: false

}

Preview:

React-Country-Region-Selector

Download Details:

Author: benkeen

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/benkeen/react-country-region-selector

License: MIT

You Might Be Interested In:

Add Comment