Add storybook.

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

demo/Demo.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { usePosition } from '../src/usePosition';
+
+export const Demo = ({watch = false}) => {
+  const {
+    latitude,
+    longitude,
+    timestamp,
+    accuracy,
+    error
+  } = usePosition(watch);
+
+  return (
+    <ul>
+      <li><code>latitude: {latitude}</code></li>
+      <li><code>longitude: {longitude}</code></li>
+      <li><code>timestamp: {timestamp}</code></li>
+      <li><code>accuracy: {accuracy}{accuracy && 'm'}</code></li>
+      <li><code>error: {error}</code></li>
+    </ul>
+  );
+};

package.json

@@ -4,7 +4,9 @@
   "description": "React hook for fetching and following browser location",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -23,6 +25,13 @@
   },
   "homepage": "https://github.com/trekhleb/use-position#readme",
   "devDependencies": {
+    "@babel/core": "^7.4.5",
+    "@storybook/addon-actions": "^5.1.9",
+    "@storybook/addon-links": "^5.1.9",
+    "@storybook/addons": "^5.1.9",
+    "@storybook/react": "^5.1.9",
+    "babel-loader": "^8.0.6",
     "react": "^16.8.6"
-  }
+  },
+  "dependencies": {}
 }

src/usePosition.js

@@ -1,22 +1,24 @@
 import {useState, useEffect} from 'react';
 
-const watcherSettings = {
+const settings = {
   enableHighAccuracy: false,
 };
 
-export const usePosition = (settings = watcherSettings) => {
-  const [pos, setPos] = useState({});
-  const [err, setErr] = useState(null);
+export const usePosition = (watch = false) => {
+  const [position, setPosition] = useState({});
+  const [error, setError] = useState(null);
 
-  const onChange = ({coords}) => {
-    setPos({
-      lat: coords.latitude,
-      lon: coords.longitude,
+  const onChange = (position) => {
+    setPosition({
+      latitude: position.coords.latitude,
+      longitude: position.coords.longitude,
+      accuracy: position.coords.accuracy,
+      timestamp: position.timestamp,
     });
   };
 
   const onError = (error) => {
-    setErr(error);
+    setError(error.message);
   };
 
   useEffect(() => {
@@ -27,14 +29,17 @@ export const usePosition = (settings = watcherSettings) => {
       return;
     }
 
-    const watcher = geo.watchPosition(onChange, onError, settings);
-
-    return () => geo.clearWatch(watcher);
+    if (watch) {
+      const watcher = geo.watchPosition(onChange, onError, settings);
+    } else {
+      geo.getCurrentPosition(onChange, onError, settings);
+    }
+
+    return () => watch ? geo.clearWatch(watcher) : null;
   }, [settings]);
 
   return {
-    lat: pos.lat,
-    lon: pos.lon,
-    err,
+    ...position,
+    error,
   };
 };

stories/index.stories.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Demo } from '../demo/Demo';
+
+storiesOf('usePosition', module)
+  .add('Fetching once', () => <Demo />)
+  .add('Watching', () => <Demo watch />);