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>

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"]}
/>