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.

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

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

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

export default BasicUsage;