Country Dropdown

A customizable React component for country, state, and city dropdowns.

Installation

Step 1: Install the package from npm.

To get started with the Country Dropdown component, follow these steps:

npm i country-dropdown

Step 2: Request an API key from Country State City API.

Before using the component, you need to get an API key from the Country State City API website.

Step 3: Set the API key in the environment(.env) file.

Please make sure to replace the your_api_key in the .env file with your actual API key.

REACT_APP_COUNTRY_STATE_CITY_API_KEY = your_api_key

Step 4: Wrap your component using ValueProvider.

Wrap your components using the ValueProvider component to ensure proper functionality.

import { ValueProvider } from "country-dropdown";

<ValueProvider>
    <YourComponents>
</ValueProvider>

Step 5: Import the Dropdown component and use it.

Import the Dropdown component and integrate it into your application, providing a suitable onChange function.

import { Dropdown, ValueProvider } from "country-dropdown";

<ValueProvider>
    <Dropdown
        onChange={(value, type) => handleChange(value, type)}
    />
</ValueProvider>

Prop Name	Type	Description
onChange	(value: object, type: string) => void	A callback function triggered when the value of the dropdown changes. Receives the selected value and the type of dropdown (e.g., "Country", "State", "City").
dropdownOptions (optional)	Array<string>	An array of strings representing the dropdown options. Determines the number of dropdowns to display. Example: ["Country", "State", "City"].
cityPlaceholder (optional)	string	The placeholder text to display in the city dropdown.
statePlaceholder (optional)	string	The placeholder text to display in the state dropdown.
countryPlaceholder (optional)	string	The placeholder text to display in the country dropdown.
containerClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the container that wraps the dropdown component.
inputClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the dropdown input field.
optionItemClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the dropdown options.
optionItemSelectedClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the selected dropdown options.
optionsListClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the dropdown options list.
optionItemHoverClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the dropdown options when hovered. Use hover: for Tailwind classes and :hover for regular CSS classes.
defaultCountryValue (optional)	string	The ISO2 code for the default country to be selected if Country is not present in the dropdown options.
defaultStateValue (optional)	string	The ISO2 code for the default state to be selected if Country and State are not present in the dropdown options.
labelClasses (optional)	string	A CSS class name or Tailwind classes to customize the styling of the input label.
cityLabel (optional)	string	A label for the city dropdown.
countryLabel (optional)	string	A label for the country dropdown.
stateLabel (optional)	string	A label for the state dropdown.
cityDropdownName (optional)	string	A name for the city dropdown.
stateDropdownName (optional)	string	A name for the state dropdown.
countryDropdownName (optional)	string	A name for the country dropdown.

Click here to visit Countries States Cities Demo for reference

Use Dropdown with react-hook-form Library

import { DropdownWithReactHookForm } from "country-dropdown";

<DropdownWithReactHookForm
    onDropdownChange={(value, type) =>
        handleChange(value, type)
    }
    dropdownOptions={["City", "State", "Country"]}
/>

Prop Name	Type	Description
onDropdownChange	(value: object, type: string) => void	A callback function triggered when the value of the dropdown changes. Receives the selected value and the type of dropdown (e.g., "Country", "State", "City").
dropdownOptions (optional)	Array<string>	An array of strings representing the dropdown options. Determines the number of dropdowns to display. Example: ["Country", "State", "City"].
cityPlaceholder (optional)	string	The placeholder text to display in the city dropdown.
statePlaceholder (optional)	string	The placeholder text to display in the state dropdown.
countryPlaceholder (optional)	string	The placeholder text to display in the country dropdown.
containerClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the container that wraps the dropdown component.
inputClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the dropdown input field.
optionItemClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the dropdown options.
optionItemSelectedClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the selected dropdown options.
optionsListClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the dropdown options list.
optionItemHoverClassName (optional)	string	A CSS class name or Tailwind classes to customize the styling of the dropdown options when hovered. Use hover: for Tailwind classes and :hover for regular CSS classes.
defaultCountryValue (optional)	string	The ISO2 code for the default country to be selected if Country is not present in the dropdown options.
defaultStateValue (optional)	string	The ISO2 code for the default state to be selected if Country and State are not present in the dropdown options.
labelClasses (optional)	string	A CSS class name or Tailwind classes to customize the styling of the input label.
cityLabel (optional)	string	A label for the city dropdown.
countryLabel (optional)	string	A label for the country dropdown.
stateLabel (optional)	string	A label for the state dropdown.
cityDropdownName (optional)	string	A name for the city dropdown.
stateDropdownName (optional)	string	A name for the state dropdown.
countryDropdownName (optional)	string	A name for the country dropdown.
errorClassNames (optional)	string	CSS class name or Tailwind classes to customize the styling of the error message.
cityValidations (optional)	RegisterOptions	Validations for city dropdown
stateValidations (optional)	RegisterOptions	Validations for state dropdown
countryValidations (optional)	RegisterOptions	Validations for country dropdown