Add heading to Storybook.

README.md

@@ -77,7 +77,7 @@ const {
   accuracy,
   heading,
   error,
-} = usePosition(watch, {enableHighAccuracy: true});
+} = usePosition(watch, { enableHighAccuracy: true });
 ```
 
 ### Full example
@@ -104,8 +104,8 @@ export const Demo = () => {
       longitude: {longitude}<br/>
       speed: {speed}<br/>
       timestamp: {timestamp}<br/>
-      accuracy: {accuracy && `${accuracy}m`}<br/>
-      heading: {heading && `${heading} degree`}<br/>
+      accuracy: {accuracy && `${accuracy} meters`}<br/>
+      heading: {heading && `${heading} degrees`}<br/>
       error: {error}
     </code>
   );
@@ -129,5 +129,5 @@ export const Demo = () => {
 - `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`),
-- `heading: number | null` - this value, specified in degrees, indicates how far off from heading due north the device is
+- `heading: number | null` - direction in which the device is traveling, in degrees (`0` degrees - north, `90` degrees - east, `270` degrees - west, and so on),
 - `error: string` - error message or `null` (i.e. `User denied Geolocation`)

demo/Demo.js

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

tests/__snapshots__/usePosition.test.js.snap

@@ -17,6 +17,8 @@ Array [
     <br />
     speed: 
     <br />
+    heading: 
+    <br />
     error: 
   </code>,
 ]
@@ -34,6 +36,8 @@ exports[`usePosition should return empty values by default in watching mode 1`]
   <br />
   speed: 
   <br />
+  heading: 
+  <br />
   error: 
   Geolocation is not supported
 </code>
@@ -51,6 +55,8 @@ exports[`usePosition should return error if navigator is not supported 1`] = `
   <br />
   speed: 
   <br />
+  heading: 
+  <br />
   error: 
   Geolocation is not supported
 </code>
@@ -68,6 +74,8 @@ exports[`usePosition should return error while fetching 1`] = `
   <br />
   speed: 
   <br />
+  heading: 
+  <br />
   error: 
   User denied Geolocation
 </code>
@@ -85,6 +93,8 @@ exports[`usePosition should return error while watching 1`] = `
   <br />
   speed: 
   <br />
+  heading: 
+  <br />
   error: 
   User denied Geolocation
 </code>
@@ -102,11 +112,14 @@ exports[`usePosition should return latitude and longitude even if watch is undef
   1561815013194
   <br />
   accuracy: 
-  24m
+  24 meters
   <br />
   speed: 
   0
   <br />
+  heading: 
+  90 degrees
+  <br />
   error: 
 </code>
 `;
@@ -123,11 +136,14 @@ exports[`usePosition should return latitude and longitude while fetching 1`] = `
   1561815013194
   <br />
   accuracy: 
-  24m
+  24 meters
   <br />
   speed: 
   0
   <br />
+  heading: 
+  90 degrees
+  <br />
   error: 
 </code>
 `;
@@ -144,11 +160,14 @@ exports[`usePosition should return latitude and longitude while watching 1`] = `
   1561815013194
   <br />
   accuracy: 
-  24m
+  24 meters
   <br />
   speed: 
   0
   <br />
+  heading: 
+  90 degrees
+  <br />
   error: 
 </code>
 `;

tests/usePosition.test.js

@@ -7,6 +7,7 @@ const mockPosition = {
     latitude: 52.3172414,
     longitude: 4.8717809,
     accuracy: 24,
+    heading: 90,
     speed: 0,
   },
   timestamp: 1561815013194,