🌍 Geo Location Picker

A lightweight and accessible React component library for selecting geographic data: countries by continent, country names, and international phone codes. Built with flexibility and styled using Tailwind CSS.

✨ Features

• 🌐 GeoLocationPicker – Select countries grouped by continent
• 🗼 SelectCountry – Simple searchable dropdown for countries
• 📞 SelectPhoneCode – Select country phone codes with flags
• ⚡ Optimized with React's useDeferredValue for smooth typing
• 🎨 Styled using TailwindCSS
• 📦 Zero runtime dependencies

📦 Installation

Using npm:

npm install geo-location-picker

Using yarn:

yarn add geo-location-picker

Using pnpm:

pnpm add geo-location-picker

🧹 Components

1. GeoLocationPicker

import { GeoLocationPicker } from 'geo-location-picker';

<GeoLocationPicker onChange={(selected) => console.log(selected)} />

2. SelectCountry

import { SelectCountry } from 'geo-location-picker';

<SelectCountry onSelect={(country) => console.log(country)} />

3. SelectPhoneCode

import { SelectPhoneCode } from 'geo-location-picker';

<SelectPhoneCode onSelect={(code) => console.log(code)} />

🎨 Styling

This library uses Tailwind CSS for styling. To apply styles correctly, make sure to import the package’s styles:

import 'geo-location-picker/dist/src/index.css';

Or extract and customize the styles if you're integrating into a custom Tailwind setup.

🧠 Props

GeoLocationPicker

| Prop | Type | Description | |------------|------------------------------------------------|-----------------------------------------| | onChange | (value: Record<string, Set<string>>) => void | Called when country selection changes |

SelectCountry

| Prop | Type | Description | |------------|---------------------------|---------------------------------------| | onSelect | (value: string) => void | Called when a country is selected |

SelectPhoneCode

| Prop | Type | Description | |------------|---------------------------|----------------------------------------| | onSelect | (value: string) => void | Called when a phone code is selected |

♿ Accessibility

• Full keyboard navigation
• ARIA roles applied for dropdown inputs
• Focus ring and hover state styling

🪪 License

ISC