Region Whitelist

The whitelist prop on the RegionDropdown component limits the listed regions to those that you specify. The values are found in the countryShortCode value in the source data package. Note the order will always be alphabetical.

Select CountryCanadaUnited States-

---

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

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

  return (
    <>
      <CountryDropdown
        value={country}
        onChange={(val) => setCountry(val)}
        whitelist={['CA', 'US']}
      />
      <RegionDropdown
        country={country}
        value={region}
        onChange={(val) => setRegion(val)}
        whitelist={{
          CA: ['AB', 'BC'],
          US: ['WA', 'TX'],
        }}
      />
    </>
  );
};

export default RegionWhitelist;