README
React Google Places Autocomplete hook
This is the Fork of tintef/react-google-places-autocomplete
Getting started
Install the latest version:
npm install --save @erslee/react-google-places-autocomplete-hook
or
yarn add @erslee/react-google-places-autocomplete-hook
Use the hook in the component!
import React from 'react';
import useGooglePlacesAutocomplete from '@erslee/react-google-places-autocomplete-hook';
const Component = () => (
const [ autocompleteData, setAutocompleteData ] = useState([]);
const [ autocomplete ] = useGooglePlacesAutocomplete({
apiKey: "***",
debounce: 300,
minLengthAutocomplete: 3
});
const handleChange = (event) => {
const value = event.target.value;
autocomplete(value, (data) => {
setAutocompleteData(data);
})
}
<div>
<input onChange={handleChange} />
{autocompleteData && autocompleteData.map(item => <li>item.label</li>)}
</div>
);
Original Documentation
Use the component!
import React from 'react';
import GooglePlacesAutocomplete from 'react-google-places-autocomplete';
const Component = () => (
<div>
<GooglePlacesAutocomplete
apiKey="****"
/>
</div>
);
export default Component;
Coming from v2? Check the migration guide
Documentation
How to contribute?
Fork this repo
Clone your fork
Code 🤓
Test your changes
For this, I like to use yalc, as it allows to emulate the process of using npm/yarn.
- Install yalc
- Build project with
yarn build
ornpm run build
- Publish the package with yalc:
yalc publish
- Add the package to your test project
yalc add react-google-places-automocomplete
- If needed, to update the package on your test project:
yalc update react-google-places-autocomplete
Submit a PR!
Icons made by Freepik from www.flaticon.com