Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including material-ui-places with all npm packages installed. Try it out:

var materialUiPlaces = require("material-ui-places")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

material-ui-places v1.1.7

Wrapper on top of the material-ui AutoComplete component that use google place api

Build Status

material-ui-places component for ReactJS

Wrapper on top of the material-ui AutoComplete component that use google place api

Installation

Add this script to your html page:

<head>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
</head>

Material-ui is required:

  npm install material-ui
  npm install material-ui-places

Features

  • AutoComplete that auto-load google places

Getting started

<GooglePlaceAutocomplete
  searchText={'paris'}
  onChange={onAutoCompleteInputChangeFct}
  onNewRequest={onClickLocationFct}
  name={'location'}
/>

Props:

  • Same as AutoComplete material-ui component

  • onNewRequest: function -> (selectedData, searchedText, selectedDataIndex)

  • location: {lat: latitude, lng: longitude}, default: {lat: 0, lng: 0} see LatLng

  • radius: number, default: 0

  • bounds: object, {sw: southWest, ne: northEast} for LatLngBounds or {south: south, east: east, north: north, west: west} for LatLngBoundsLiteral default: undefined

  • getRef: function -> (ref)

  • types: Array, The types of predictions to be returned. Four types are supported: 'establishment' for businesses, 'geocode' for addresses, '(regions)' for administrative regions and '(cities)' for localities. If nothing is specified, all types are returned., default undefined

  • restrictions: country: Array|String, { country: [ 'fr', 'gb'] | 'gb' } Restricts predictions to the specified country (ISO 3166-1 Alpha-2 country code, case insensitive). E.g., us, br, au. You can provide a single one, or an array of up to 5 country code strings. See ComponentRestrictions

Development

  • npm run build - produces production version
  • npm run dev - produces development version
  • npm test - run the tests
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free