Location Picker
A location picker component that allows users to search and select locations.
Installation
Install the Location Picker component using your preferred package manager.
Usage
The Location Picker component provides an interface for searching and selecting locations. It supports both popover and inline variants to fit different UI contexts.
Discover Its Features
The Location Picker component is packed with powerful features designed to provide an exceptional user experience.
Location Search
Users can search for locations by name, address, or postal code with real-time suggestions.
Dual Variants
Choose between popover variant for compact layouts or inline variant for full-featured forms.
Autocomplete Suggestions
As users type, the component provides autocomplete suggestions for locations with debounced search.
Geolocation Support
Allows users to quickly use their current location with browser geolocation API.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultLocation | string | '' | The default location to display |
| autoDetectOnLoad | boolean | false | Whether to automatically detect location on component load |
| variant | 'popover' | 'inline' | 'popover' | The display variant of the component |
| placeholder | string | 'Enter city, district, or area' | Placeholder text for the search input |
| showLabel | boolean | true | Whether to show the label section (only applies to inline variant) |
| onChange | (location: string) => void | undefined | Callback function called when location changes |
| className | string | '' | Additional class names for styling |
Advanced Usage
Explore different configurations and use cases for the Location Picker component.
Popover Variant (Default)
Compact trigger that opens a popover with location search functionality. Perfect for navigation bars or space-constrained layouts.
Inline Variant
Full-featured inline interface with immediate access to search functionality. Ideal for forms or dedicated location selection pages.
Location
Find products near you
Auto-detect Location
Automatically detect user's current location when the component loads.
Custom Styling
Customize the appearance with className and custom placeholder text.
With Change Handler
Handle location changes with a callback function for integration with forms or state management.
Location
Find products near you
Check console for location changes