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.

Getting started

Install the library:

npm install react-autocomplete-france

yarn add react-autocomplete-france

pnpm install react-autocomplete-france

Example

Fast example

import {useAutocomplete} from "../../hooks";

export function ExampleAutocomplete() {

    const { ref } = useAutocomplete({
      onSuggestionSelected: (suggestion) => {
        console.log(suggestion);
      },
    });

    return <input ref={ref}/>;
}

Full example

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 (
        <div>
            <h1>Exemple</h1>
            <input ref={ref}/>
        </div>
    )
}

Reference

Props

Props for the useAutocomplete hook:

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.