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);
        },
        searchType: 'housenumber',
        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:

alignementRef?: React.RefObject<HTMLElement>
onSuggestionSelected?: (suggestion: AutocompleteFeature) => void
searchType?: "street" | "housenumber" | "locality" | "municipality"
debounce?: number
limit?: number
hasWatermark?: boolean
containerStyle?: React.CSSProperties
suggestionStyle?: React.CSSProperties
suggestionLabelStyle?: React.CSSProperties
containerPosition?: {
    top: number;
    left: number;
}

Table with the props:

| Prop | Type | Description | |------------------------| --- |-----------------------------------------------------------------------------------------| | alignementRef | React.RefObject<HTMLElement> | Reference to the element that the suggestions should be aligned with. | | onSuggestionSelected | (suggestion: AutocompleteFeature) => void | Callback function that is called when a suggestion is selected. | | searchType | string | Type of search. Possible values are street, housenumber, locality, municipality | | 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. | | suggestionLabelStyle | React.CSSProperties | Style object for the suggestion labels. | | containerPosition | { top: number; left: number; } | Position of the container (manual mode). |

Contributing

You can contribute to this project by opening an issue or a pull request.

License

This project is licensed under the MIT License.