@erslee/react-google-places-autocomplete-hook NPM

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

Read The Docs

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.
1. Install yalc
2. Build project with yarn build or npm run build
3. Publish the package with yalc: yalc publish
4. Add the package to your test project yalc add react-google-places-automocomplete
5. If needed, to update the package on your test project: yalc update react-google-places-autocomplete