Skip to content

a-maggi/country-autocomplete

Repository files navigation

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! 🎉

About

React component to autocomplete country names

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published