Skip to main content

Basic Usage

Let's get started! This first demo shows the basic usage of the script, using minimal settings. As you can see, you're responsible for tracking state, but the script handles rendering the appropriate countries and regions.

The script outputs raw select and option HTML elements, so any styling is up to you. However, do see the integrations section if you want to use the script with Material UI, Fluent UI or other framework components instead of basic HTML.

Note the use of the extra onChangeCountry method which resets the region value when the country value is removed by the user. This may or may not be needed depending on your use-case, but it's never a bad idea to ensure your state is correct. The remaining demos won't include that callback and simply call setCountry instead.

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

const BasicUsage = () => {
  const [country, setCountry] = useState('');
  const [region, setRegion] = useState('');

  const onChangeCountry = (val) => {
    setCountry(val);
    if (!val) {
      setRegion('');
    }
  };

  return (
    <>
      <CountryDropdown value={country} onChange={onChangeCountry} />
      <RegionDropdown
        country={country}
        value={region}
        onChange={(val) => setRegion(val)}
      />
    </>
  );
};

export default BasicUsage;