Upgrade dependencies and add speed to the docs and tests.

README.md

@@ -4,7 +4,7 @@
 [![npm version](https://badge.fury.io/js/use-position.svg)](https://badge.fury.io/js/use-position)
 [![codecov](https://codecov.io/gh/trekhleb/use-position/branch/master/graph/badge.svg)](https://codecov.io/gh/trekhleb/use-position)
 
-React hook `usePosition()` allows you to fetch client's browser geolocation and/or subscribe to all further geolocation changes.
+React hook `usePosition()` allows you to fetch a client's browser geolocation and/or subscribe to all further geolocation changes.
 
 ▶︎ [Storybook demo](https://trekhleb.github.io/use-position/) of `usePosition()` hook.
 
@@ -38,6 +38,7 @@ import { usePosition } from 'use-position';
 const {
   latitude,
   longitude,
+  speed,
   timestamp,
   accuracy,
   error,
@@ -53,13 +54,14 @@ const watch = true;
 const {
   latitude,
   longitude,
+  speed,
   timestamp,
   accuracy,
   error,
 } = usePosition(watch);
 ```
 
-### Following client location with highest accuracy
+### Following client location with the highest accuracy
 
 The second parameter of `usePosition()` hook is [position options](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions).
 
@@ -68,6 +70,7 @@ const watch = true;
 const {
   latitude,
   longitude,
+  speed,
   timestamp,
   accuracy,
   error,
@@ -85,6 +88,7 @@ export const Demo = () => {
   const {
     latitude,
     longitude,
+    speed,
     timestamp,
     accuracy,
     error,
@@ -94,6 +98,7 @@ export const Demo = () => {
     <code>
       latitude: {latitude}<br/>
       longitude: {longitude}<br/>
+      speed: {speed}<br/>
       timestamp: {timestamp}<br/>
       accuracy: {accuracy && `${accuracy}m`}<br/>
       error: {error}
@@ -116,6 +121,7 @@ export const Demo = () => {
 
 - `latitude: number` - latitude (i.e. `52.3172414`),
 - `longitude: number` - longitude (i.e. `4.8717809`),
+- `speed: number | null` - velocity of the device in meters per second (i.e. `2.5`),
 - `timestamp: number` - timestamp when location was detected (i.e. `1561815013194`),
 - `accuracy: number` - location accuracy in meters (i.e. `24`),
 - `error: string` - error message or `null` (i.e. `User denied Geolocation`)

demo/Demo.js

@@ -8,6 +8,7 @@ export const Demo = ({watch, settings}) => {
     longitude,
     timestamp,
     accuracy,
+    speed,
     error,
   } = usePosition(watch, settings);
 
@@ -26,6 +27,7 @@ export const Demo = ({watch, settings}) => {
         longitude: {longitude}<br/>
         timestamp: {timestamp}<br/>
         accuracy: {accuracy && `${accuracy}m`}<br/>
+        speed: {speed}<br/>
         error: {error}
       </code>
     </>

package.json

@@ -37,10 +37,10 @@
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "^5.1.9",
-    "@storybook/addon-links": "^5.1.9",
-    "@storybook/addons": "^5.1.9",
-    "@storybook/react": "^5.1.9",
+    "@storybook/addon-actions": "^6.0.27",
+    "@storybook/addon-links": "^6.0.27",
+    "@storybook/addons": "^6.0.27",
+    "@storybook/react": "^6.0.27",
     "babel-loader": "^8.0.6",
     "eslint": "^6.0.1",
     "eslint-config-google": "^0.14.0",

tests/__snapshots__/usePosition.test.js.snap

@@ -15,6 +15,8 @@ Array [
     <br />
     accuracy: 
     <br />
+    speed: 
+    <br />
     error: 
   </code>,
 ]
@@ -30,6 +32,8 @@ exports[`usePosition should return empty values by default in watching mode 1`]
   <br />
   accuracy: 
   <br />
+  speed: 
+  <br />
   error: 
   Geolocation is not supported
 </code>
@@ -45,6 +49,8 @@ exports[`usePosition should return error if navigator is not supported 1`] = `
   <br />
   accuracy: 
   <br />
+  speed: 
+  <br />
   error: 
   Geolocation is not supported
 </code>
@@ -60,6 +66,8 @@ exports[`usePosition should return error while fetching 1`] = `
   <br />
   accuracy: 
   <br />
+  speed: 
+  <br />
   error: 
   User denied Geolocation
 </code>
@@ -75,6 +83,8 @@ exports[`usePosition should return error while watching 1`] = `
   <br />
   accuracy: 
   <br />
+  speed: 
+  <br />
   error: 
   User denied Geolocation
 </code>
@@ -94,6 +104,9 @@ exports[`usePosition should return latitude and longitude even if watch is undef
   accuracy: 
   24m
   <br />
+  speed: 
+  0
+  <br />
   error: 
 </code>
 `;
@@ -112,6 +125,9 @@ exports[`usePosition should return latitude and longitude while fetching 1`] = `
   accuracy: 
   24m
   <br />
+  speed: 
+  0
+  <br />
   error: 
 </code>
 `;
@@ -130,6 +146,9 @@ exports[`usePosition should return latitude and longitude while watching 1`] = `
   accuracy: 
   24m
   <br />
+  speed: 
+  0
+  <br />
   error: 
 </code>
 `;

tests/usePosition.test.js

@@ -7,6 +7,7 @@ const mockPosition = {
     latitude: 52.3172414,
     longitude: 4.8717809,
     accuracy: 24,
+    speed: 0,
   },
   timestamp: 1561815013194,
 };
@@ -39,7 +40,7 @@ describe('usePosition', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should return latitude and longitude while watching', () => {    
+  it('should return latitude and longitude while watching', () => {
     global.navigator.geolocation = mockGeolocation;
     let testRenderer;
     act(() => {
@@ -49,7 +50,7 @@ describe('usePosition', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should return latitude and longitude while fetching', () => {    
+  it('should return latitude and longitude while fetching', () => {
     global.navigator.geolocation = mockGeolocation;
     let testRenderer;
     act(() => {
@@ -59,7 +60,7 @@ describe('usePosition', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should return error while watching', () => {    
+  it('should return error while watching', () => {
     global.navigator.geolocation = mockGeolocationError;
     let testRenderer;
     act(() => {
@@ -69,7 +70,7 @@ describe('usePosition', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should return error while fetching', () => {    
+  it('should return error while fetching', () => {
     global.navigator.geolocation = mockGeolocationError;
     let testRenderer;
     act(() => {
@@ -80,7 +81,7 @@ describe('usePosition', () => {
   });
 
   it('should return error if navigator is not supported', () => {
-    global.navigator.geolocation = null; 
+    global.navigator.geolocation = null;
     let testRenderer;
     act(() => {
       testRenderer = renderer.create(<Demo />);
@@ -113,7 +114,7 @@ describe('usePosition', () => {
     expect(global.navigator.geolocation.clearWatch).not.toHaveBeenCalled();
   });
 
-  it('should return latitude and longitude even if watch is undefined', () => {    
+  it('should return latitude and longitude even if watch is undefined', () => {
     global.navigator.geolocation = mockGeolocation;
     let testRenderer;
     act(() => {