https://github.com/c-delouvencourt/react-autocomplete-france
React components for France Address Gouv Autocomplete 🔍🌍🇫🇷
https://github.com/c-delouvencourt/react-autocomplete-france
address adresse autocomplete component france gouv places places-autocomplete react
Last synced: 3 months ago
JSON representation
React components for France Address Gouv Autocomplete 🔍🌍🇫🇷
- Host: GitHub
- URL: https://github.com/c-delouvencourt/react-autocomplete-france
- Owner: c-delouvencourt
- License: mit
- Created: 2024-08-29T09:20:44.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-08-29T12:47:10.000Z (9 months ago)
- Last Synced: 2025-01-31T21:11:32.533Z (4 months ago)
- Topics: address, adresse, autocomplete, component, france, gouv, places, places-autocomplete, react
- Language: TypeScript
- Homepage: https://tinyurl.com/example-autocomplete
- Size: 1.82 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-autocomplete-france
`react-autocomplete-france` is a React library for address autocompletion in France. It uses the `adresse.data.gouv.fr` API to provide real-time address suggestions.
Live example : [https://tinyurl.com/example-autocomplete](https://tinyurl.com/example-autocomplete).
## Getting started
Install the library:
```shell
npm install react-autocomplete-france
```
```shell
yarn add react-autocomplete-france
```
```shell
pnpm install react-autocomplete-france
```
## Example
### Fast example
```jsx
import {useAutocomplete} from "../../hooks";
export function ExampleAutocomplete() {
const { ref } = useAutocomplete({
onSuggestionSelected: (suggestion) => {
console.log(suggestion);
},
});
return ;
}
```
### Full example
```jsx
import {useAutocomplete} from "../../hooks";
export function ExampleAutocomplete() {
const { ref } = useAutocomplete({
onSuggestionSelected: (suggestion) => {
console.log(suggestion);
},
debounce: 300,
limit: 5,
hasWatermark: true,
containerStyle: {
backgroundColor: 'white'
},
suggestionStyle: {
padding: '8px',
borderBottom: '1px solid #ccc',
cursor: 'pointer'
},
});
return (
Exemple
)
}
```
## Reference
### Props
Props for the `useAutocomplete` hook:
```typescript
onSuggestionSelected?: (suggestion: AutocompleteFeature) => void
debounce?: number
limit?: number
hasWatermark?: boolean
containerStyle?: React.CSSProperties
suggestionStyle?: React.CSSProperties
```
Table with the props:
| Prop | Type | Description |
| --- | --- | --- |
| `onSuggestionSelected` | `(suggestion: AutocompleteFeature) => void` | Callback function that is called when a suggestion is selected. |
| `debounce` | `number` | Debounce time in milliseconds. |
| `limit` | `number` | Maximum number of suggestions to show. |
| `hasWatermark` | `boolean` | Whether to show the watermark. |
| `containerStyle` | `React.CSSProperties` | Style object for the container. |
| `suggestionStyle` | `React.CSSProperties` | Style object for the suggestions. |
## Contributing
You can contribute to this project by opening an issue or a pull request.
## License
This project is licensed under the MIT License.