Update example to use functional component with hooks

Author: SamSamskies

README.md

@@ -78,74 +78,58 @@ Only `mapRef` and `mapboxApiAccessToken` are required.
 ```js
 import 'mapbox-gl/dist/mapbox-gl.css'
 import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css'
-import React, { Component } from 'react'
+import React, { useState, useRef, useCallback } from 'react'
 import MapGL from 'react-map-gl'
 import Geocoder from 'react-map-gl-geocoder'
 
-function getAccessToken() {
-  var accessToken = null;
-
-  if (typeof window !== 'undefined' && window.location) {
-    var match = window.location.search.match(/access_token=([^&\/]*)/);
-    accessToken = match && match[1];
-  }
-
-  if (!accessToken && typeof process !== 'undefined') {
-    // Note: This depends on bundler plugins (e.g. webpack) inmporting environment correctly
-    accessToken = accessToken || process.env.MapboxAccessToken; // eslint-disable-line
-  }
-
-  return accessToken || null;
-}
-
 // Ways to set Mapbox token: https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens
-const MAPBOX_TOKEN = getAccessToken()
-
-class Example extends Component {
-  state = {
-    viewport: {
-      latitude: 37.7577,
-      longitude: -122.4376,
-      zoom: 8
-    }
-  }
-
-  mapRef = React.createRef()
-
-  handleViewportChange = (viewport) => {
-    this.setState({
-      viewport: { ...this.state.viewport, ...viewport }
-    })
-  }
+const MAPBOX_TOKEN = 'REPLACE_WITH_YOUR_MAPBOX_TOKEN'
+
+const Example = () => {
+  const [viewport, setViewport] = useState({
+    latitude: 37.7577,
+    longitude: -122.4376,
+    zoom: 8
+  });
+  const mapRef = useRef();
+  const handleViewportChange = useCallback(
+    (newViewport) => setViewport(newViewport),
+    []
+  );
 
   // if you are happy with Geocoder default settings, you can just use handleViewportChange directly
-  handleGeocoderViewportChange = (viewport) => {
-    const geocoderDefaultOverrides = { transitionDuration: 1000 }
-
-    return this.handleViewportChange({
-      ...viewport,
-      ...geocoderDefaultOverrides
-    })
-  }
-
-  render() {
-    return (
+  const handleGeocoderViewportChange = useCallback(
+    (newViewport) => {
+      const geocoderDefaultOverrides = { transitionDuration: 1000 };
+
+      return handleViewportChange({
+        ...newViewport,
+        ...geocoderDefaultOverrides
+      });
+    },
+    [handleViewportChange]
+  );
+
+  return (
+    <div style={{ height: "100vh" }}>
       <MapGL
-        ref={this.mapRef}
-        {...this.state.viewport}
+        ref={mapRef}
+        {...viewport}
         width="100%"
         height="100%"
-        onViewportChange={this.handleViewportChange}
-        mapboxApiAccessToken={MAPBOX_TOKEN}>
+        onViewportChange={handleViewportChange}
+        mapboxApiAccessToken={MAPBOX_TOKEN}
+      >
         <Geocoder
-          mapRef={this.mapRef}
-          onViewportChange={this.handleGeocoderViewportChange}
+          mapRef={mapRef}
+          onViewportChange={handleGeocoderViewportChange}
           mapboxApiAccessToken={MAPBOX_TOKEN}
+          position="top-left"
         />
       </MapGL>
-    )
-  }
-}
+    </div>
+  );
+};
 
 export default Example
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-map-gl-geocoder",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "description": "React wrapper for mapbox-gl-geocoder for use with react-map-gl",
   "source": "src/index.js",
   "main": "dist/index.js",