updgrade to @material-ui

.babelrc

@@ -1,4 +1,9 @@
 {
-  "presets": ["react", "es2015"],
-  "plugins": ["babel-plugin-add-module-exports", "transform-object-rest-spread"]
+  "presets": ["react", "env"],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-object-rest-spread",
+    "transform-decorators-legacy"
+  ]
 }

README.md

@@ -30,22 +30,23 @@ Material-ui is required:
 
 
 ```jsx
-<GooglePlaceAutocomplete
-  searchText={'paris'}
-  onChange={onAutoCompleteInputChangeFct}
-  onNewRequest={onClickLocationFct}
-  name={'location'}
+<GoogleAddress
+  placeholder="Address"
+  value={this.state.value}
+  onChange={this.handleChange}
+  onSuggestionSelected={this.addAddress}
+  types={['address']}
+  location={{lat: '35.9981298', lng: '-83.9541637'}}
 />
 ```
 ### Props:
 
-* [Same as AutoComplete material-ui component](http://www.material-ui.com/#/components/auto-complete)
+* onChange: a function to run when the input value is changed (aside from the regular fetching suggestions)
 
-* onNewRequest: function -> (selectedData, searchedText, selectedDataIndex)
+* value: You can use this if you want to set the input value yourself, combined with on change. You can use this for example if you want to clear the input after the users picks a selection (see example below)
 
-* onChange: function -> ({target: {value: searchText}}, dataSource, params)
 
-* location: {lat: latitude, lng: longitude}, default: ```{lat: 0, lng: 0}``` see [LatLng](https://developers.google.com/maps/documentation/javascript/reference?hl=fr#LatLng)
+* location: This will tell google where to bias the location results, to return more likely places {lat: latitude, lng: longitude}, default: ```{lat: 0, lng: 0}``` see [LatLng](https://developers.google.com/maps/documentation/javascript/reference?hl=fr#LatLng)
 
 * radius: number, default: ```0```
 
@@ -59,6 +60,53 @@ The types of predictions to be returned. Four types are supported: 'establishmen
 * 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](https://developers.google.com/maps/documentation/javascript/reference#ComponentRestrictions)
 
+### Example
+```js
+import { Button } from '@material-ui/core';
+import React from 'react';
+
+import { GoogleAddress } from '../components/google-address';
+
+export class UserAccount extends React.Component {
+  addAddress = description => {
+    fetch('/add-address', {
+      headers: {
+        ['Content-Type']: 'text/plain'
+      },
+      credentials: 'same-origin',
+      method: 'POST',
+      body: description,
+    })
+    this.setState({
+      value: ''
+    })
+  }
+  handleChange = e => {
+    this.setState({
+      value: e.target.value
+    })
+  }
+  state = {
+    value: ''
+  }
+  render() {
+    return <div>
+      <h1>Account Info</h1>
+      <GoogleAddress
+        placeholder="Address"
+        value={this.state.value}
+        onChange={this.handleChange}
+        onSuggestionSelected={this.addAddress}
+        types={['address']}
+        location={{lat: '35.9981298', lng: '-83.9541637'}}
+      />
+      <Button onClick={this.verify_address}>Add Address</Button>
+    </div>
+  }
+}
+```
+
+
 ## Development
 
 * `npm run build` - produces production version

package.json

@@ -4,8 +4,8 @@
   "description": "Wrapper on top of the material-ui AutoComplete component that use google place api",
   "main": "lib/material-ui-places.min.js",
   "scripts": {
-    "build": "webpack --env.mode=build",
-    "dev": "webpack --progress --colors --watch --mode=dev",
+    "build": "NODE_ENV=build webpack",
+    "dev": "NODE_ENV=dev webpack --progress --colors --watch",
     "test": "mocha ./test/.setup.js ./test/**/*.spec.js"
   },
   "devDependencies": {
@@ -15,7 +15,10 @@
     "babel-eslint": "7.1.1",
     "babel-loader": "6.3.2",
     "babel-plugin-add-module-exports": "0.2.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "6.22.0",
     "babel-preset-react": "^6.16.0",
     "babel-register": "^6.16.3",
@@ -55,5 +58,9 @@
   "bugs": {
     "url": "https://github.com/ydeshayes/googlePlaceAutocomplete/issues"
   },
-  "homepage": "https://github.com/ydeshayes/googlePlaceAutocomplete"
+  "homepage": "https://github.com/ydeshayes/googlePlaceAutocomplete",
+  "dependencies": {
+    "@material-ui/core": "^1.1.0",
+    "downshift": "^1.31.15"
+  }
 }