Searching for: {searchedPlace}
Loading: {isAutocompleteLoading ? 'Yes' : 'No'}
Suggestions count: {suggestions.length}
{selectedPlace && (
Selected Place:
Name: {selectedPlace.name}
Address: {selectedPlace.address}
Coordinates: {selectedPlace.latitude}, {selectedPlace.longitude}
Area: {selectedPlace.area}
City: {selectedPlace.city}
)}
);
};
export default CustomAutocompleteDisplay;
```
### State Variables Exposed
- **searchedPlace** (string): Current search input value.
- **setSearchedPlace** (function): Function to update search input.
- **selectedPlace** (object): Currently selected place object.
- **setSelectedPlace** (function): Function to set selected place.
- **suggestions** (array): Array of autocomplete suggestions.
- **setSuggestions** (function): Function to update suggestions.
- **isAutocompleteLoading** (boolean): Boolean indicating loading state.
- **setIsAutocompleteLoading** (function): Function to set loading state.
```
--------------------------------
### BarikoiAutocomplete Component
Source: https://github.com/barikoi/barikoi-map-widget/blob/main/README.md
The BarikoiAutocomplete component provides a customizable search input with autocomplete suggestions.
```APIDOC
## BarikoiAutoComplete
The **BarikoiAutoComplete** component is a customizable search input field with real-time autocomplete suggestions fetched from the **Barikoi API**. It supports **debounced search**, **smooth dropdown animations**, and allows **custom styling** via `className` props.
### Basic Example
```tsx
import { BarikoiAutocomplete } from 'barikoi-map-widget';
const BarikoiAutocompleteComponent = () => {
return (
Searching for: {searchedPlace}
Loading: {isAutocompleteLoading ? 'Yes' : 'No'}
Suggestions count: {suggestions.length}
{selectedPlace && (
Selected Place:
Name: {selectedPlace.name}
Address: {selectedPlace.address}
Coordinates: {selectedPlace.latitude}, {selectedPlace.longitude}
Area: {selectedPlace.area}
City: {selectedPlace.city}
)}
);
};
export default CustomAutocompleteDisplay;
```
--------------------------------
### CSS for Map Container
Source: https://github.com/barikoi/barikoi-map-widget/blob/main/README.md
Apply this CSS to style the map container. Adjust width and height to fit your layout requirements.
```css
.map-container {
width: 100%;
height: 100vh;
}
```
--------------------------------
### Use Map Hook for Programmatic Map Control
Source: https://context7.com/barikoi/barikoi-map-widget/llms.txt
The useMap hook provides access to map state like zoom level and center coordinates, along with functions to update them. It also exposes marker data and its setter. This hook is essential for controlling map behavior programmatically, such as centering the map on a selected place or adjusting zoom.
```tsx
import { useEffect } from 'react';
import { useAutocomplete, useMap } from 'barikoi-map-widget';
const MapController = () => {
const { selectedPlace } = useAutocomplete();
const {
zoomLevel,
setZoomLevel,
centerPoint,
setCenterPoint,
markerData,
setMarkerData
} = useMap();
// Sync map center with selected place from autocomplete
useEffect(() => {
if (selectedPlace?.latitude && selectedPlace?.longitude) {
setCenterPoint({
lat: parseFloat(selectedPlace.latitude),
lng: parseFloat(selectedPlace.longitude)
});
}
}, [selectedPlace, setCenterPoint]);
const handleGoToDhaka = () => {
setCenterPoint({ lat: 23.8103, lng: 90.4125 });
};
return (