Country Autocomplete

This is a simple, reusable country dropdown component for your web applications. It uses Google's Places and Geocoding API to fetch the list of countries.

The advantage of using Google API is that we can search for countries in any language. For example, if you search for "India" in Hindi, you will get the same result as if you searched for "India" in English.

Demo: https://country-autocomplete.vercel.app/

Installation

yarn add country-autocomplete

Prerequisites

This component requires a Google API key to function correctly. You need to provide your own API key in order to use this component. You can get your API key from here.

Once you have the key, add it to your environment variables:

GOOGLE_API_KEY=<your-api-key>

Replace <your-api-key> with your actual API key.

Usage

import React from 'react';
import CountryAutocomplete from 'country-autocomplete';

const App = () => {
  const [country, setCountry] = React.useState('');

  return (
    <div>
      <CountryAutocomplete
        value={country}
        onSelect={setCountry}
      />
    </div>
  );
};

Props

| Prop | Type | Description | | --- | --- | --- | | id | string | The ID for the input field. | | value | Option | The current selected value. | | onSelect | (value: Option) => void | Callback function when a country from the autocomplete list is selected. | | onChange | (value: string) => void | Callback function when the input value changes. | | onBlur | (event: React.FocusEvent) => void | Callback function when the input field loses focus. | | disabled | boolean | If true, the input field is disabled. | | placeholder | string | Placeholder text for the input field. | | noResultsText | string | Text to display when there are no results found. |

Contribute

• Clone the repository
• Run npm install to install the dependencies
• Develop! 🎉