MUI Google Places Autocomplete

React component for easily use Google Places Autocomplete, which uses the MUI React Autocomplete component.

A fork of Nicolas Tinte's brilliant component, which uses react-select.

Warning
This is currently pre-production - don't expect it to work right now.

Getting started

Install the latest version:

npm install --save mui-google-places-autocomplete
  or
yarn add mui-google-places-autocomplete

Use the component:

import React from "react";
import GooglePlacesAutocomplete from "@dylmye/mui-google-places-autocomplete";

const Component = () => (
  <div>
    <GooglePlacesAutocomplete apiKey="****" />
  </div>
);

export default Component;

Or with Formik:

import React from "react";
import { Formik, Form, Field } from "formik";
import { GooglePlacesAutocompleteField } from "@dylmye/mui-google-places-autocomplete";

const MyForm = () => (
  <Formik onSubmit={console.log}>
    <Form>
      <Field
        name="location"
        component={GooglePlacesAutocompleteField}
        apiKey="****"
      />
    </Form>
  </Formik>
);

export default MyForm;

Documentation

Read The Docs

How to contribute?

1. Fork this repo

2. Clone your fork

3. Code 🤓

4. 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 @dylmye/mui-google-places-autocomplete
   5. If needed, to update the package on your test project: yalc update @dylmye/mui-google-places-autocomplete

5. Submit a PR!