To allow a user to indicate a valid address, we can use the Open Street Map (OSM) Nominatim service.
I’ve set up an example project using React and Typescript, with custom Hooks, showing their implementation and usage.
The address of the GitHub repository is:
https://github.com/rallets/react-open-street-map-nominatim
It also uses other libraries, just because they are the ones I normally use, but it should be very easy to replace them with any other, as the core of the functions are extracted in custom hooks (useDebounce and useOpenStreetMapNominatim).
The idea of the custom component is to limit interactions with OSM as much as possible, to avoid being banned by making unnecessary queries.
NB. I recommend that you read the “Terms and conditions” on their site very well.
The user therefore:
– after a lookup, select an address from those proposed.
– at this point you can choose to modify it.
– if instead we already propose an address, for example because it has already been saved in a database, the user can modify it with an “explicit” button.
– while a modification/search is in progress, it is possible to “roll back” and return to the previous valid address selected.
In this way we have “stored” all the time a valid address, and it’s possible to skip extra validations.
Let me know if you found this helpful!
Here some screenshot of the component in action
