RCG

On this page, you'll find a handful of examples. Each example includes JSX code to demonstrate its functionality. However, please keep in mind that you'll need to provide the necessary onChange methods and store the values for the country and region. For complete instructions on how to add this component to your pages, please refer to the readme documentation

1. Simple Example

Usage

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

  <CountrySelector
    showCountryFlag // flag to show the country flag
    value={country}
    onChange={setCountry} 
    />

    <RegionSelector
    country={country} // requried value
    value={region}
    onChange={setRegion}
     />

2. Show/Hide Labels

Select Country

Select State

Usage

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

  <CountrySelector
    showCountryFlag // flag to show the country flag
    label="Select Country"
    value={country}
    onChange={setCountry} 
    showLabel
    label="Select Country"
    />

    <RegionSelector
    label="Select Region"
    country={country} // requried value
    value={region}
    showLabel
    label="Select State"
    onChange={setRegion}
     />

3. Personalize the name, class, and ID attributes of both dropdowns to suit your needs.

Select Country

Select State

Usage

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

  <CountrySelector
    showCountryFlag
    value={country}
    onChange={setCountry}
    labelProps={{ className: 'testClassname', style: { textTransform: 'uppercase' } }}
    inputProps={{
        id: 'country',
        className: 'selectorInput',
        name: "countrySelect"
    }}
    showLabel
    label="Select Country"
    />
    <RegionSelector
     country={country}
     value={state}
     onChange={setstate}
     inputProps={{
        id: 'region',
         className: 'selectorInput',
         name: "regionSelect"
     }}
     showLabel
     label="Select State"
     />

4. Shortened names for countries and regions

Select Country

Select State

Usage

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

  <CountrySelector
    showCountryFlag
    value={country}
    onChange={setCountry}
    shortCode // Shortened names for country (IN,US,CA,SA)
    showLabel
    label="Select Country"
    />
    <RegionSelector
    country={country}
    value={state}
    onChange={setstate}
    shortCode // Shortened names for regions (HP,MP,UP,PB)
    showLabel
    label="Select State"
     />

5. The Country and Region dropdowns support the use of arbitrary attributes, including style and tabindex

Select Country

Select State

Usage

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

<CountrySelector
showCountryFlag
value={country}
onChange={setCountry}
showLabel
label="Select Country"
labelProps={{ className: 'testClassname', 
style: { textTransform: 'uppercase', color: 'red' } 
}}
inputProps={{ className: 'selectorInput', 
style: { borderColor: 'red', 
background: "rgb(42, 39, 52)", color: '#fff' 
} 
}}
/>
<RegionSelector
country={country}
value={state}
onChange={setState}
showLabel
label="Select State"
labelProps={{ className: 'testClassname', 
style: { textTransform: 'uppercase', color: 'blue' }
 }}
inputProps={{ className: 'selectorInput', 
style: { borderColor: '#000', background: "#e9e7dc", color: '#000' } 
}}
/>

6. Prioritize India, United States and the UK by displaying them at the top of the dropdown list.

Select Country

Usage

const [country, setCountry] = useState('');


<CountrySelector
showCountryFlag
value={country}
onChange={setCountry}
showLabel
label="Select Country"
leadingCountries={["in", "us", "ca"]} // use "leadingCountries" Props 
//if you want to prioritize your preferred countries.
/>

7. Approve only particular regions

Select Country

Select State

Usage

const [country, setCountry] = useState('');


<CountrySelector
showCountryFlag
value={country}
onChange={setCountry}
showLabel
label="Select Country"
inputProps={{
    className: 'selectorInput',
    style: {
        borderColor: 'red',
        background: "rgb(42, 39, 52)", color: '#fff',
    }
}}
allowcountry={["us", "af", "germany", "in", "cn"]}
// use 'allowcountry' props to show only specific country
/>

<RegionSelector
country={country}
value={state}
onChange={setState}
showLabel
label="Select State"
inputProps={{
    className: 'selectorInput',
    style: {
        borderColor: 'red',
        background: "rgb(42, 39, 52)", color: '#fff',
    }
}}
whitelist={{
    CA: ["BC", "AB", "MB"],
    US: ["washington", "Oregon", "Illinois"],
    in: ['hp', "punjab"],
}}
// use 'whitelist' props to show only specific 
//regions from the selected countries
/>