A slightly-modified implementation of React Geosuggest


120.3.04 years ago5 years agoMinified + gzip package size for @synapsestudios/google-places-field in KB



A slightly-modified implementation of React Geosuggest.

npm version google-places-field dependencies google-places-field peer dependencies


A demo is available at https://synapsestudios.github.io/google-places-field/


Installing via CLI

// yarn
yarn add @synapsestudios/google-places-field

// npm
npm install --save @synapsestudios/google-places-field

Importing JS

import GooglePlaces from '@synapsestudios/google-places-field';

Importing CSS

// Minified, autoprefixed css
import '@synapsestudios/google-places-field/lib/google-places-field.min.css';

// Not-minified, not-autoprefixed css
import '@synapsestudios/google-places-field/lib/google-places-field.css';

Using Stylus

If you are using Stylus you can import the .styl file into your build:

@import '@synapsestudios/google-places-field/lib/google-places-field.styl';

! See the Stylus Variables section below for variables/details.

Using with an ES6 Class and React Component State

import React, { Component } from 'react';
import Script from 'react-load-script';
import GooglePlaces from '@synapsestudios/google-places-field';

import '@synapsestudios/google-places-field/lib/google-places-field.min.css';

class SetStateExample extends Component {
  state = {
    googleApiLoaded: false,
    googleApiError: false,
    result: null,

  onGoogleApiLoaded = () => {
    this.setState({ googleApiLoaded: true });

  onGoogleApiError = error => {
    this.setState({ googleApiError: true });

  onSelect = result => {

  render() {
    const { googleApiLoaded, googleApiError } = this.state;
    return (
          ? <Script
          /> : null}
          ? <GooglePlaces onSelect={this.onSelect} />
          : null}
          ? <div>An error occured while loading the Google Places API</div>
          : null}

export default SetStateExample;


Required Props

onSelect: (required)

onSelect is the callback function invoked when a user selects an address from the Google Places dropdown. onSelect returns an object with formatted location data as well as the original Google Places data object.

onSelect: PropTypes.func.isRequired,

Additional Props

Any additional props will be passed thru directly to the React Geosuggest component. See their documentation for additional props/usage.

Stylus Variables

google-places-field comes with a set of stylus variables that can be overridden to add your own project-specific theming, as shown below:

/* Theming by overriding default stylus variables with your projects colors */

$google-places-field--border-color = #b1c1c5;
$google-places-field--box-shadow = 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);

@import '@synapsestudios.com/google-places-field/css/google-places-field.styl';


To run the project on your own computer:

  • Clone this repository
  • yarn install or npm install
  • yarn run storybook or npm run storybook
  • Visit http://localhost:5000/
  • Changes made to files in the src directory should immediately compile and be visible in your browser.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.