Create custom hooks useMap

flexbox · Apr 24, 2019 · fc0df85 · fc0df85
1 parent 543a040
commit fc0df85
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/2-custom-hooks-and-useDebugValue/app/src/Map.js b/2-custom-hooks-and-useDebugValue/app/src/Map.js
@@ -1,23 +1,14 @@
-import React, { useRef, useEffect } from "react";
-import Leaflet from "leaflet";
-import "leaflet/dist/leaflet.css";
+import React from 'react';
+import 'leaflet/dist/leaflet.css';
+import useMap from './useMap';
 
 function Map() {
-  const element = useRef(null);
-
-  useEffect(() => {
-    const map = Leaflet.map(element.current).setView([51.505, -0.09], 13);
-
-    Leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-      attribution:
-        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    }).addTo(map);
-  });
+  const mapElement = useMap();
 
   return (
     <div
-      ref={element}
-      style={{ width: 600, height: 400, backgroundColor: "#ddd" }}
+      ref={mapElement}
+      style={{ width: 600, height: 400, backgroundColor: '#ddd' }}
     />
   );
 }

diff --git a/2-custom-hooks-and-useDebugValue/app/src/useMap.js b/2-custom-hooks-and-useDebugValue/app/src/useMap.js
@@ -0,0 +1,19 @@
+import { useRef, useEffect } from 'react';
+import Leaflet from 'leaflet';
+
+function useMap() {
+  const mapElement = useRef(null);
+
+  useEffect(() => {
+    const map = Leaflet.map(mapElement.current).setView([51.505, -0.09], 13);
+
+    Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+  }, []);
+
+  return mapElement;
+}
+
+export default useMap;