diff --git a/README.md b/README.md index 77b95f4e..5b4c4f2e 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@



- 🎣 + 👍
react-use
@@ -11,29 +11,33 @@

+


Collection of essential React Hooks.
This is mostly port of libreact to React Hooks. - +


+
+ 
npm i react-use
+
+
- ## Reference -- State +- [__State__](./docs/State.md) - [`useToggle`](./docs/useToggle.md) — tracks state of a boolean. - [`useCounter`](./docs/useCounter.md) — tracks state of a number. - [`useList`](./docs/useList.md) — tracks state of an array. - [`useMap`](./docs/useMap.md) — tracks state of an object.

-- Sensors +- [__Sensors__](./docs/Sensors.md) - [`useBattery`](./docs/useBattery.md) — tracks device batter state. - [`useGeolocation`](./docs/useGeolocation.md) — tracks geo location state of user's device. - [`useHover`](./docs/useHover.md) — tracks mouse hover state of some element. @@ -41,18 +45,25 @@ - [`useLocation`](./docs/useLocation.md) — tracks page navigation bar location state. - [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query. - [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices. + - [`useMotion`](./docs/useMotion.md) — tracks state of device's motion sensor. - [`useNetwork`](./docs/useNetwork.md) — tracks state of user's internet connection. - [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation. - [`useSize`](./docs/useSize.md) — tracks some HTML element's dimensions. - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions.

-- Side effects +- [__Side-effects__](./docs/Side-effects.md) - [`useTitle`](./docs/useTitle.md) — sets title of the page.

+## 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) — public domain. diff --git a/docs/Sensors.md b/docs/Sensors.md new file mode 100644 index 00000000..4f3aeecc --- /dev/null +++ b/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. diff --git a/docs/Side-effects.md b/docs/Side-effects.md new file mode 100644 index 00000000..e6051a4c --- /dev/null +++ b/docs/Side-effects.md @@ -0,0 +1,3 @@ +# Side-effects + +*"Side-effect Hooks"* allow your app trigger various side-effects using browser's API. diff --git a/docs/State.md b/docs/State.md new file mode 100644 index 00000000..b9e6613f --- /dev/null +++ b/docs/State.md @@ -0,0 +1,3 @@ +# State + +*"State Hooks"* allow you to easily manage state of booleans, arrays, and maps. \ No newline at end of file diff --git a/docs/useMotion.md b/docs/useMotion.md new file mode 100644 index 00000000..4089a198 --- /dev/null +++ b/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 ( + 
+      {JSON.stringify(state, null, 2)}
+
+ ); +}; +``` diff --git a/docs/useTItle.md b/docs/useTitle.md similarity index 100% rename from docs/useTItle.md rename to docs/useTitle.md diff --git a/package.json b/package.json index a72e169f..e8ecfa01 100644 --- a/package.json +++ b/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", diff --git a/src/__stories__/useMotion.story.tsx b/src/__stories__/useMotion.story.tsx new file mode 100644 index 00000000..8f1f1765 --- /dev/null +++ b/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 ( + 
+      {JSON.stringify(state, null, 2)}
+
+ ); +}; + +storiesOf('useMotion', module) + .add('Example', () => + + ) diff --git a/src/index.ts b/src/index.ts index e9c7faca..ba694032 100644 --- a/src/index.ts +++ b/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, diff --git a/src/useMotion.ts b/src/useMotion.ts new file mode 100644 index 00000000..3955b64e --- /dev/null +++ b/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;