Region Blacklist

The blacklist prop on the RegionDropdown copmonent lets you hide specific regions from the list. This hides Alberta and BC from Canada's regions and Washington and Texas from US. The values are found in the countryShortCode value in the source data package.

This demo uses the whitelist option of the CountryDropdown, just to make the demo a bit clearer. And also note that we memoize the whitelist props to prevent unnecessary re-renders. See the notes on performance.

Select CountryCanadaUnited States-

---

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

const RegionBlacklist = () => {
  const [country, setCountry] = useState('');
  const [region, setRegion] = useState('');
  const countryWhitelist = useMemo(() => ['CA', 'US'], []);
  const regionBlacklist = useMemo(
    () => ({
      CA: ['AB', 'BC'],
      US: ['WA', 'TX'],
    }),
    []
  );

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

export default RegionBlacklist;