Package Exports

react-places-autocomplete

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-places-autocomplete) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-places-autocomplete

A React component to build a customized UI for Google Maps Places Autocomplete

Features

Enable you to easily build a customized autocomplete dropdown powered by Google Maps Places Library
Utility function to get latitude and longitude using Google Maps Geocoder API

Installation

To install the stable version

npm install --save react-places-autocomplete

The React component is exported as a default export

import PlacesAutocomplete from 'react-places-autocomplete'

geocodeByAddress utility function is a named export

import { geocodeByAddress } from 'react-places-autocomplete'

Getting Started

To use this component, you are going to need to load Google Maps JavaScript API

Load the library in your project

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Declare your PlacesAutocomplete component using React component

import React from 'react'
import PlacesAutocomplete, { geocodeByAddress } from 'react-places-autocomplete'

class SimpleForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = { address: 'San Francisco, CA' }
    this.setAddress = this.setAddress.bind(this)
    this.handleFormSubmit = this.handleFormSubmit.bind(this)
  }

  setAddress(address) {
    this.setState({ address })
  }

  handleFormSubmit(event) {
    event.preventDefault()
    const { address } = this.state

    geocodeByAddress(address,  (err, { lat, lng }) => {
      if (err) {
        console.log('Oh no!', err)
      }

      console.log(`Yay! got latitude and longitude for ${address}`, { lat, lng })
    })
  }

  render() {
    return (
      <form onSubmit={this.handleFormSubmit}>
        <PlacesAutocomplete
          value={this.state.address}
          setAddress={this.setAddress}
        />
        <button type="submit">Submit</button>
      </form>
    )
  }
}

export default SimpleForm

Props for `PlacesAutocomplete`

value

Type: String Required: true

Value displayed in the input field

setAddress

Type: function Required: true

Please see the example above

`geocodeByAddress` API

geocodeByAddress(address, callback)

address

Type: String Required: true

String that gets passed to Google Maps Geocoder

callback

Type: function Required: true

Two arguments will be passed to the callback. First argument is an error object. Second argument is an object with lat and lng keys

License

MIT