Merge pull request #3 from streamich/feat-hooks

feat: 🎸 add useMotion hook

README.md

@@ -2,7 +2,7 @@
   <h1>
     <br/>
     <br/>
-    🎣
+    👍
     <br />
     react-use
     <br />
@@ -11,29 +11,33 @@
     <br />
   </h1>
   <sup>
+    <br />
     <br />
     <br />
     Collection of essential <a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a>.</em>
     <br />
     <em>This is mostly port of <a href="https://github.com/streamich/libreact"><code>libreact</code></a> to React Hooks.</em>
-  </sub>
+  </sup>
   <br />
   <br />
   <br />
+  <br />
+  <pre>npm i <a href="https://www.npmjs.com/package/react-use">react-use</a></pre>
+  <br />
+  <br />
 </div>
 
 
-
 ## Reference
 
-- State
+- [__State__](./docs/State.md)
    - [`useToggle`](./docs/useToggle.md) &mdash; tracks state of a boolean.
    - [`useCounter`](./docs/useCounter.md) &mdash; tracks state of a number.
    - [`useList`](./docs/useList.md) &mdash; tracks state of an array.
    - [`useMap`](./docs/useMap.md) &mdash; tracks state of an object.
      <br/>
      <br/>
-- Sensors
+- [__Sensors__](./docs/Sensors.md)
    - [`useBattery`](./docs/useBattery.md) &mdash; tracks device batter state.
    - [`useGeolocation`](./docs/useGeolocation.md) &mdash; tracks geo location state of user's device.
    - [`useHover`](./docs/useHover.md) &mdash; tracks mouse hover state of some element.
@@ -41,18 +45,25 @@
    - [`useLocation`](./docs/useLocation.md) &mdash; tracks page navigation bar location state.
    - [`useMedia`](./docs/useMedia.md) &mdash; tracks state of a CSS media query.
    - [`useMediaDevices`](./docs/useMediaDevices.md) &mdash; tracks state of connected hardware devices.
+   - [`useMotion`](./docs/useMotion.md) &mdash; tracks state of device's motion sensor.
    - [`useNetwork`](./docs/useNetwork.md) &mdash; tracks state of user's internet connection.
    - [`useOrientation`](./docs/useOrientation.md) &mdash; tracks state of device's screen orientation.
    - [`useSize`](./docs/useSize.md) &mdash; tracks some HTML element's dimensions.
    - [`useWindowSize`](./docs/useWindowSize.md) &mdash; tracks `Window` dimensions.
      <br/>
      <br/>
-- Side effects
+- [__Side-effects__](./docs/Side-effects.md)
    - [`useTitle`](./docs/useTitle.md) &mdash; sets title of the page.
      <br/>
      <br/>
 
 
+## Usage
+
+- You need to have React `16.7.0-alpha.0` or later installed to use Hooks API.
+- You can import each hook individually `import useToggle from 'react-use/lib/useToggle'`.
+
+
 ## License
 
 [Unlicense](./LICENSE) &mdash; public domain.

docs/Sensors.md

@@ -0,0 +1,4 @@
+# Sensors
+
+*"Sensor Hooks"* listen to changes in some interface and force your components
+to be re-rendered with the new state, up-to-date state.

docs/Side-effects.md

@@ -0,0 +1,3 @@
+# Side-effects
+
+*"Side-effect Hooks"* allow your app trigger various side-effects using browser's API.

docs/State.md

@@ -0,0 +1,3 @@
+# State
+
+*"State Hooks"* allow you to easily manage state of booleans, arrays, and maps.

docs/useMotion.md

@@ -0,0 +1,20 @@
+# `useMotion`
+
+React sensor hook that uses device's acceleration sensor to track its motions.
+
+
+## Usage
+
+```jsx
+import {useMotion} from 'react-use';
+
+const Demo = () => {
+  const state = useMotion();
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
+  );
+};
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-use",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "Collection of React Hooks",
   "main": "lib/index.js",
   "files": [
@@ -17,6 +17,14 @@
   },
   "author": "@streamich",
   "license": "Unlicense",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/streamich/react-use.git"
+  },
+  "bugs": {
+    "url": "https://github.com/streamich/react-use/issues"
+  },
+  "homepage": "https://github.com/streamich/react-use#readme",
   "dependencies": {
     "@types/react": "^16.4.18",
     "@types/react-dom": "^16.0.9",

src/__stories__/useMotion.story.tsx

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

src/index.ts

@@ -8,6 +8,7 @@ import useLocation from './useLocation';
 import useMap from './useMap';
 import useMedia from './useMedia';
 import useMediaDevices from './useMediaDevices';
+import useMotion from './useMotion';
 import useNetwork from './useNetwork';
 import useOrientation from './useOrientation';
 import useSize from './useSize';
@@ -26,6 +27,7 @@ export {
   useMap,
   useMedia,
   useMediaDevices,
+  useMotion,
   useNetwork,
   useOrientation,
   useSize,

src/useMotion.ts

@@ -0,0 +1,84 @@
+import {useState, useEffect} from './react';
+import {on, off} from './util';
+
+export interface MotionSensorState {
+  acceleration: {
+    x: number | null,
+    y: number | null,
+    z: number | null,
+  },
+  accelerationIncludingGravity: {
+    x: number | null,
+    y: number | null,
+    z: number | null,
+  },
+  rotationRate: {
+    alpha: number | null,
+    beta: number | null,
+    gamma: number | null,
+  },
+  interval: number | null,
+}
+
+const defaultState: MotionSensorState = {
+  acceleration: {
+    x: null,
+    y: null,
+    z: null,
+  },
+  accelerationIncludingGravity: {
+    x: null,
+    y: null,
+    z: null,
+  },
+  rotationRate: {
+    alpha: null,
+    beta: null,
+    gamma: null,
+  },
+  interval: 16,
+};
+
+const useMotion = (initialState: MotionSensorState = defaultState) => {
+  const [state, setState] = useState(initialState);
+
+  useEffect(() => {
+    const handler = (event) => {
+      const {
+        acceleration,
+        accelerationIncludingGravity,
+        rotationRate,
+        interval
+      } = event;
+    
+      setState({
+        acceleration: {
+          x: acceleration.x,
+          y: acceleration.y,
+          z: acceleration.z
+        },
+        accelerationIncludingGravity: {
+          x: accelerationIncludingGravity.x,
+          y: accelerationIncludingGravity.y,
+          z: accelerationIncludingGravity.z
+        },
+        rotationRate: {
+          alpha: rotationRate.alpha,
+          beta: rotationRate.beta,
+          gamma: rotationRate.gamma,
+        },
+        interval
+      });
+    };
+
+    on(window, 'devicemotion', handler);
+
+    return () => {
+      off(window, 'devicemotion', handler);
+    };
+  }, [0]);
+
+  return state;
+};
+
+export default useMotion;