🌍 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