feat: 🎸 add useGeolocation hook

README.md

@@ -12,6 +12,7 @@
    - [`useMap`](./docs/useMap.md)
 - Sensors
    - [`useBattery`](./docs/useBattery.md)
+   - [`useGeolocation`](./docs/useGeolocation.md)
    - [`useHover`](./docs/useHover.md)
    - [`useSize`](./docs/useSize.md)
    - [`useWindowSize`](./docs/useWindowSize.md)

docs/useBattery.md

@@ -12,11 +12,9 @@ const Demo = () => {
   const state = useBattery();
 
   return (
-    <div>
-      <pre>
-        {JSON.stringify(state, null, 2)}
-      </pre>
-    </div>
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
   );
 };
 ```

docs/useGeolocation.md

@@ -0,0 +1,20 @@
+# `useGeolocation`
+
+React sensor hook that tracks user's geographic location.
+
+
+## Usage
+
+```jsx
+import {useGeolocation} from 'react-use';
+
+const Demo = () => {
+  const state = useGeolocation();
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
+  );
+};
+```

src/__stories__/useBattery.story.tsx

@@ -6,11 +6,9 @@ const Demo = () => {
   const state = useBattery();
 
   return (
-    <div>
-      <pre>
-        {JSON.stringify(state, null, 2)}
-      </pre>
-    </div>
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
   );
 };
 

src/__stories__/useGeolocation.story.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {useGeolocation} from '..';
+
+const Demo = () => {
+  const state = useGeolocation();
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
+  );
+};
+
+storiesOf('useGeolocation', module)
+  .add('Example', () =>
+    <Demo/>
+  )

src/index.ts

@@ -1,5 +1,6 @@
 import useBattery from './useBattery';
 import useCounter from './useCounter';
+import useGeolocation from './useGeolocation';
 import useHover from './useHover';
 import useList from './useList';
 import useMap from './useMap';
@@ -11,6 +12,7 @@ import useWindowSize from './useWindowSize';
 export {
   useBattery,
   useCounter,
+  useGeolocation,
   useHover,
   useList,
   useMap,

src/useGeolocation.ts

@@ -0,0 +1,56 @@
+import {useState, useEffect} from './react';
+
+export interface GeoLocationSensorState {
+  accuracy: number,
+  altitude: number,
+  altitudeAccuracy: number,
+  heading: number,
+  latitude: number,
+  longitude: number,
+  speed: number,
+  timestamp: number
+}
+
+const useGeolocation = () => {
+  const [state, setState] = useState({
+    accuracy: null,
+    altitude: null,
+    altitudeAccuracy: null,
+    heading: null,
+    latitude: null,
+    longitude: null,
+    speed: null,
+    timestamp: Date.now(),
+  });
+  let mounted = true;
+  let watchId: any;
+
+  const onEvent = (event: any) => {
+    if (mounted) {
+      setState({
+        accuracy: event.coords.accuracy,
+        altitude: event.coords.altitude,
+        altitudeAccuracy: event.coords.altitudeAccuracy,
+        heading: event.coords.heading,
+        latitude: event.coords.latitude,
+        longitude: event.coords.longitude,
+        speed: event.coords.speed,
+        timestamp: event.timestamp,
+      });
+    }
+  };
+
+  useEffect(() => {
+    navigator.geolocation.getCurrentPosition(onEvent);
+    watchId = navigator.geolocation.watchPosition(onEvent);
+
+    return () => {
+      mounted = false;
+      navigator.geolocation.clearWatch(watchId);
+    };
+  }, [0]);
+
+  return state;
+};
+
+export default useGeolocation;