Merge pull request #173 from sonaye/patch-1

Add React 16 to peerDependencies

Author: auser

README.md

@@ -1,4 +1,3 @@
-
 <p align="center">
   <img src="resources/readme/fullstackreact-google-maps-tutorial.png" alt="Fullstack React Google Maps Tutorial" />
 </p>
@@ -49,6 +48,7 @@ If you want to add a loading container _other than the default_ loading containe
 const LoadingContainer = (props) => (
   <div>Fancy loading container!</div>
 )
+
 export default GoogleApiWrapper({
   apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE),
   LoadingContainer: LoadingContainer
@@ -61,7 +61,7 @@ export default GoogleApiWrapper({
 import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
 
 export class MapContainer extends Component {
-render() {
+  render() {
     return (
       <Map google={this.props.google} zoom={14}>
 
@@ -138,58 +138,55 @@ The `<Map />` component handles events out of the box. All event handlers are op
 When the `<Map />` instance has been loaded and is ready on the page, it will call the `onReady` prop, if given. The `onReady` prop is useful for fetching places or using the autocomplete API for places.
 
 ```javascript
-React.createClass({
-  fetchPlaces: function(mapProps, map) {
-    const {google} = mapProps;
-    const service = new google.maps.places.PlacesService(map);
-    // ...
-  },
-  render: function() {
-    return (
-      <Map google={this.props.google}
-        onReady={this.fetchPlaces}
-        visible={false}>
-          <Listing places={this.state.places} />
-      </Map>
-    )
-  }
-});
+fetchPlaces(mapProps, map) {
+  const {google} = mapProps;
+  const service = new google.maps.places.PlacesService(map);
+  // ...
+}
+
+render() {
+  return (
+    <Map google={this.props.google}
+      onReady={this.fetchPlaces}
+      visible={false}>
+        <Listing places={this.state.places} />
+    </Map>
+  )
+}
 ```
 
 #### onClick
 
 To listen for clicks on the `<Map />` component, pass the `onClick` prop:
 
 ```javascript
-React.createClass({
-  mapClicked: function(mapProps, map, clickEvent) {
-    // ...
-  },
-  render: function() {
-    return (
-      <Map google={this.props.google}
-        onClick={this.mapClicked} />
-    )
-  }
-});
+mapClicked(mapProps, map, clickEvent) {
+  // ...
+}
+
+render() {
+  return (
+    <Map google={this.props.google}
+      onClick={this.mapClicked} />
+  )
+}
 ```
 
 #### onDragend
 
 When our user changes the map center by dragging the Map around, we can get a callback after the event is fired with the `onDragend` prop:
 
 ```javascript
-React.createClass({
-  centerMoved: function(mapProps, map) {
-    // ...
-  },
-  render: function() {
-    return (
-      <Map google={this.props.google}
-        onDragend={this.centerMoved} />
-    )
-  }
-});
+centerMoved(mapProps, map) {
+  // ...
+}
+
+render() {
+  return (
+    <Map google={this.props.google}
+      onDragend={this.centerMoved} />
+  )
+}
 ```
 
 ### Visibility
@@ -256,51 +253,52 @@ The `<Marker />` component listens for events, similar to the `<Map />` componen
 You can listen for an `onClick` event with the (appropriately named) `onClick` prop.
 
 ```javascript
-const WithMarkers = React.createClass({
-  onMarkerClick: function(props, marker, e) {
-  },
-  render: function() [
-    return (
-      <Map google={this.props.google}>
-        <Marker onClick={this.onMarkerClick}
-            name={'Current location'} />
-      </Map>
-    )
-  ]
-});
+onMarkerClick(props, marker, e) {
+  // ..
+}
+
+render() {
+  return (
+    <Map google={this.props.google}>
+      <Marker onClick={this.onMarkerClick}
+          name={'Current location'} />
+    </Map>
+  )
+}
 ```
 
 #### mouseover
 
 You can also pass a callback when the user mouses over a `<Marker />` instance by passing the `onMouseover` callback:
 
 ```javascript
-const Container = React.createClass({
-  onMouseoverMarker: function(props, marker, e) {
-  },
-  render: function() [
-    return (
-      <Map google={this.props.google}>
-        <Marker onMouseover={this.onMouseoverMarker}
-            name={'Current location'} />
-      </Map>
-    )
-  ]
-});
+onMouseoverMarker(props, marker, e) {
+  // ..
+}
+
+render() {
+  return (
+    <Map google={this.props.google}>
+      <Marker onMouseover={this.onMouseoverMarker}
+          name={'Current location'} />
+    </Map>
+  )
+}
 ```
 
 ### Polygon
 
 To place a polygon on the Map, set `<Polygon />` as child of Map component.
 
 ```javascript
-render: function() {
-  var triangleCoords = [
+render() {
+  const triangleCoords = [
     {lat: 25.774, lng: -80.190},
     {lat: 18.466, lng: -66.118},
     {lat: 32.321, lng: -64.757},
     {lat: 25.774, lng: -80.190}
   ];
+
   return(
     <Map google={this.props.google}
         style={{width: '100%', height: '100%', position: 'relative'}}
@@ -327,13 +325,14 @@ The `<Polygon />` component listens to `onClick`, `onMouseover` and `onMouseout`
 To place a polyline on the Map, set `<Polyline />` as child of Map component.
 
 ```javascript
-render: function() {
-  var triangleCoords = [
+render() {
+  const triangleCoords = [
     {lat: 25.774, lng: -80.190},
     {lat: 18.466, lng: -66.118},
     {lat: 32.321, lng: -64.757},
     {lat: 25.774, lng: -80.190}
   ];
+
   return(
     <Map google={this.props.google}
         style={{width: '100%', height: '100%', position: 'relative'}}
@@ -367,37 +366,29 @@ You can use a `position` prop or connect the `<InfoWindow />` component directly
 ```javascript
 //note: code formatted for ES6 here
 export class MapContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showingInfoWindow: false,
-      activeMarker: {},
-      selectedPlace: {},
-    }
+  state = {
+    showingInfoWindow: false,
+    activeMarker: {},
+    selectedPlace: {},
+  };
 
-    // binding this to event-handler functions
-    this.onMarkerClick = this.onMarkerClick.bind(this);
-    this.onMapClicked = this.onMapClicked.bind(this);
-  }
-
-  onMarkerClick: function(props, marker, e) {
+  onMarkerClick = (props, marker, e) =>
     this.setState({
       selectedPlace: props,
       activeMarker: marker,
       showingInfoWindow: true
     });
-  },
 
-  onMapClicked: function(props) {
+  onMapClicked = (props) => {
     if (this.state.showingInfoWindow) {
       this.setState({
         showingInfoWindow: false,
         activeMarker: null
       })
     }
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <Map google={this.props.google}
           onClick={this.onMapClicked}>
@@ -414,7 +405,7 @@ export class MapContainer extends Component {
       </Map>
     )
   }
-});
+}
 ```
 
 ### Events

examples/Container.js

@@ -1,84 +1,83 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import {Link} from 'react-router';
-import GitHubForkRibbon from 'react-github-fork-ribbon';
+import React, { Component } from 'react';
 
-let GoogleApiWrapper;
-if (__IS_DEV__) {
-  GoogleApiWrapper = require('../src/index').GoogleApiWrapper;
-} else {
-  GoogleApiWrapper = require('../dist').GoogleApiWrapper;
-}
+import GitHubForkRibbon from 'react-github-fork-ribbon';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router';
 
 import styles from './styles.module.css';
 
-export const Container = React.createClass({
-  propTypes: {
+const GoogleApiWrapper = __IS_DEV__
+  ? require('../src/index').GoogleApiWrapper
+  : require('../dist').GoogleApiWrapper;
+
+class Container extends Component {
+  static propTypes = {
     children: PropTypes.element.isRequired
-  },
+  };
 
-  contextTypes: {
+  static contextTypes = {
     router: PropTypes.object
-  },
+  };
+
+  renderChildren = () => {
+    const { children } = this.props;
 
-  renderChildren: function() {
-    const {children} = this.props;
     if (!children) return;
 
     const sharedProps = {
       google: this.props.google,
       loaded: this.props.loaded
     };
-    return React.Children.map(children, c => {
-      return React.cloneElement(c, sharedProps, {});
-    });
-  },
 
-  render: function() {
-    const {routeMap, routeDef} = this.props;
-    const {router} = this.context;
+    return React.Children.map(children, child =>
+      React.cloneElement(child, sharedProps, {})
+    );
+  };
+
+  render() {
+    const { routeMap, routeDef } = this.props;
 
-    const c = this.renderChildren();
     return (
       <div className={styles.container}>
         <GitHubForkRibbon
           href="//github.com/fullstackreact/google-maps-react"
-          target="_blank"
           position="right"
-        >
+          target="_blank">
           Fork me on GitHub
         </GitHubForkRibbon>
+
         <div className={styles.wrapper}>
           <div className={styles.list}>
             <ul>
-              {Object.keys(routeMap).map(key => {
-                return (
-                  <Link to={key} activeClassName={styles.active} key={key}>
-                    <li>{routeMap[key].name}</li>
-                  </Link>
-                );
-              })}
+              {Object.keys(routeMap).map(key => (
+                <Link activeClassName={styles.active} key={key} to={key}>
+                  <li>{routeMap[key].name}</li>
+                </Link>
+              ))}
             </ul>
           </div>
+
           <div className={styles.content}>
             <div className={styles.header}>
               <h1>{routeDef && routeDef.name} Example</h1>
+
               <h2>
                 <a href="https://github.com/fullstackreact/google-maps-react/blob/master/README.md">
                   Readme
                 </a>
               </h2>
             </div>
-            {c}
+
+            {this.renderChildren()}
           </div>
         </div>
       </div>
     );
   }
-});
+}
+
+const Loading = () => <div>Fancy loading container</div>;
 
-const Loading = props => <div>Fancy loading container</div>;
 export default GoogleApiWrapper({
   apiKey: __GAPI_KEY__,
   libraries: ['places', 'visualization'],