From 91eb4ea4653bab189a8ffff4e3e5cf288a3f0f41 Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 27 Oct 2018 13:18:07 +0200 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20useMotion=20ho?= =?UTF-8?q?ok?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 15 +++++- docs/useMotion.md | 20 +++++++ src/__stories__/useMotion.story.tsx | 18 +++++++ src/index.ts | 2 + src/useMotion.ts | 84 +++++++++++++++++++++++++++++ 5 files changed, 138 insertions(+), 1 deletion(-) create mode 100644 docs/useMotion.md create mode 100644 src/__stories__/useMotion.story.tsx create mode 100644 src/useMotion.ts diff --git a/README.md b/README.md index 77b95f4e..edd8d3fc 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@



- 🎣 + 👍
react-use
@@ -23,6 +23,12 @@ +## Install + +
+npm i react-use
+
+ ## Reference @@ -41,6 +47,7 @@ - [`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. @@ -53,6 +60,12 @@
+## 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/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/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; From 6daa8b3c004a87556aba58b8c70e229d485c96a4 Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 27 Oct 2018 13:21:15 +0200 Subject: [PATCH 2/8] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20center=20insta?= =?UTF-8?q?llation=20command?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index edd8d3fc..9f1faff4 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@

+


Collection of essential React Hooks. @@ -20,14 +21,13 @@


- - - -## Install - -
+  

+  
 npm i react-use
-

+
+
+
+ ## Reference From 1bb22ab854fd8a6adac115d6138ee4b151e3d015 Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 27 Oct 2018 13:21:51 +0200 Subject: [PATCH 3/8] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20fix=20README?= =?UTF-8?q?=20header=20HTML?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9f1faff4..326565e8 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Collection of essential React Hooks.
This is mostly port of libreact to React Hooks. - +


From 6124e4b177b053a8fb892f94ebdcc2c79bf376ec Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 27 Oct 2018 13:23:54 +0200 Subject: [PATCH 4/8] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20add=20State=20?= =?UTF-8?q?reference?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++---- docs/State.md | 3 +++ 2 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 docs/State.md diff --git a/README.md b/README.md index 326565e8..9c8fedf4 100644 --- a/README.md +++ b/README.md @@ -22,9 +22,7 @@


- 
-npm i react-use
-
+ 
npm i react-use


@@ -32,7 +30,7 @@ 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. 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 From a73f1ec66ad8c51ce9393432dd8663eff7387a58 Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 27 Oct 2018 13:30:38 +0200 Subject: [PATCH 5/8] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20add=20referene?= =?UTF-8?q?=20for=20Sensors=20and=20Side-effects?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- docs/Sensors.md | 4 ++++ docs/Side-effects.md | 3 +++ package.json | 8 ++++++++ 4 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 docs/Sensors.md create mode 100644 docs/Side-effects.md diff --git a/README.md b/README.md index 9c8fedf4..5b4c4f2e 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ - [`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. @@ -52,7 +52,7 @@ - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions.

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

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/package.json b/package.json index a72e169f..2fbd9769 100644 --- a/package.json +++ b/package.json @@ -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", From 27319bd0bbee0ec16556729f40c07ff03abcf1a3 Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 27 Oct 2018 13:32:22 +0200 Subject: [PATCH 6/8] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20delte=20title?= =?UTF-8?q?=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/useTItle.md | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 docs/useTItle.md diff --git a/docs/useTItle.md b/docs/useTItle.md deleted file mode 100644 index 6e52755c..00000000 --- a/docs/useTItle.md +++ /dev/null @@ -1,16 +0,0 @@ -# `useTitle` - -React side-effect hook that sets title of the page. - - -## Usage - -```jsx -import {useTitle} from 'react-use'; - -const Demo = () => { - useTitle('Hello world!'); - - return null; -}; -``` From 65b889e57f65de412f95ce6e6541e7c87917bd56 Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 27 Oct 2018 13:32:43 +0200 Subject: [PATCH 7/8] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20re-create=20ti?= =?UTF-8?q?tle=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/useTitle.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 docs/useTitle.md diff --git a/docs/useTitle.md b/docs/useTitle.md new file mode 100644 index 00000000..6e52755c --- /dev/null +++ b/docs/useTitle.md @@ -0,0 +1,16 @@ +# `useTitle` + +React side-effect hook that sets title of the page. + + +## Usage + +```jsx +import {useTitle} from 'react-use'; + +const Demo = () => { + useTitle('Hello world!'); + + return null; +}; +``` From 4236cf03bdf895b6c7f1248ae13ca2538a790193 Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 27 Oct 2018 13:35:20 +0200 Subject: [PATCH 8/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20release=20v1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGE: Released v1.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2fbd9769..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": [