diff --git a/README.md b/README.md index d465d25c..e6f59a32 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,18 @@

+ + npm package + + + npm downloads + + + demos +
Collection of essential React Hooks. - Port of libreact. See demos. + Port of libreact.
Translations: 🇨🇳 汉语 @@ -127,6 +136,24 @@ You need to have React 16.8.1 or later installed to use Hooks API. You can import each hook individually import useToggle from 'react-use/lib/useToggle'.

+

+or use ES6 named imports import {useToggle} from 'react-use'. +

+ +

+Depending on your bundler you might run into a missing dependency error with ES6 named import statements. Some hooks require you to install peer dependencies so we recommend using individual imports. If you want the best of both worlds you can transform the named import statements to individual import statements with babel-plugin-import by adding the following config to your `.babelrc` file: +

+ +```json +[ + "import", { + "libraryName": "react-use", + "libraryDirectory": "lib", + "camel2DashComponentName": false + } +] +``` +

License

@@ -134,5 +161,3 @@ You can import each hook individually import useToggle from 'react-use/lib

Unlicense — public domain.

- -[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg diff --git a/docs/Animations.md b/docs/Animation.md similarity index 100% rename from docs/Animations.md rename to docs/Animation.md diff --git a/docs/Lifecycle.md b/docs/Lifecycle.md new file mode 100644 index 00000000..2a2a6fe5 --- /dev/null +++ b/docs/Lifecycle.md @@ -0,0 +1,3 @@ +# Lifecycle + +*"Lifecycle Hooks"* modify and extend built-in React hooks or immitate React Class component lifecycle patterns. diff --git a/docs/useMouse.md b/docs/useMouse.md index 7c5903bb..a9921090 100644 --- a/docs/useMouse.md +++ b/docs/useMouse.md @@ -3,9 +3,8 @@ React sensor hooks that re-render on mouse position changes. `useMouse` simply tracks mouse position; `useMouseHovered` allows you to specify extra options: -- `bound` — to bind mouse coordinates withing the element. -- `whenHovered` — whether to attach `mousemove` event handler only when user hovers over the element. - +- `bound` — to bind mouse coordinates within the element +- `whenHovered` — whether to attach `mousemove` event handler only when user hovers over the element ## Usage @@ -27,7 +26,6 @@ const Demo = () => { }; ``` - ## Reference ```ts diff --git a/docs/useRaf.md b/docs/useRaf.md index a6ac4e93..246306fb 100644 --- a/docs/useRaf.md +++ b/docs/useRaf.md @@ -1,6 +1,6 @@ # `useRaf` -React animation hook that forces component to re-render on each `reaquestAnimationFrame`, +React animation hook that forces component to re-render on each `requestAnimationFrame`, returns percentage of time elapsed. diff --git a/docs/useSpeech.md b/docs/useSpeech.md index 35c9a77c..f94628fe 100644 --- a/docs/useSpeech.md +++ b/docs/useSpeech.md @@ -2,8 +2,6 @@ React UI hook that synthesizes human voice that speaks a given string. -[![](https://img.shields.io/badge/demo-useSpeech-green.svg)](https://codesandbox.io/s/n090mqz69m) - ## Usage diff --git a/docs/useTween.md b/docs/useTween.md index 19879e67..bef2fad1 100644 --- a/docs/useTween.md +++ b/docs/useTween.md @@ -2,8 +2,6 @@ React animation hook that tweens a number between 0 and 1. -[![](https://img.shields.io/badge/demo-useTween-green.svg)](https://codesandbox.io/s/52990wwzyl) - ## Usage @@ -21,7 +19,6 @@ const Demo = () => { }; ``` - ## Reference ```ts diff --git a/src/__stories__/useEffectOnce.story.tsx b/src/__stories__/useEffectOnce.story.tsx index f6bbf7e1..f7dda51a 100644 --- a/src/__stories__/useEffectOnce.story.tsx +++ b/src/__stories__/useEffectOnce.story.tsx @@ -16,6 +16,6 @@ const Demo = () => { return ; }; -storiesOf('Lifecycles|useEffectOnce', module) +storiesOf('Lifecycle|useEffectOnce', module) .add('Docs', () => ) .add('Demo', () => ) diff --git a/src/__stories__/useLifecycles.story.tsx b/src/__stories__/useLifecycles.story.tsx index 5b5530af..6b094613 100644 --- a/src/__stories__/useLifecycles.story.tsx +++ b/src/__stories__/useLifecycles.story.tsx @@ -8,7 +8,7 @@ const Demo = () => { return null; }; -storiesOf('Lifecycles|useLifecycles', module) +storiesOf('Lifecycle|useLifecycles', module) .add('Docs', () => ) .add('Demo', () => diff --git a/src/__stories__/useLogger.story.tsx b/src/__stories__/useLogger.story.tsx index 43ea4d20..34b8c8c0 100644 --- a/src/__stories__/useLogger.story.tsx +++ b/src/__stories__/useLogger.story.tsx @@ -22,7 +22,7 @@ const Demo = (props) => { ); }; -storiesOf('Lifecycles|useLogger', module) +storiesOf('Lifecycle|useLogger', module) .addDecorator(withKnobs) .add('Docs', () => ) .add('Demo', () => { diff --git a/src/__stories__/useMount.story.tsx b/src/__stories__/useMount.story.tsx index 906482e1..9b03daa6 100644 --- a/src/__stories__/useMount.story.tsx +++ b/src/__stories__/useMount.story.tsx @@ -10,6 +10,6 @@ const Demo = () => { return ; }; -storiesOf('Lifecycles|useMount', module) +storiesOf('Lifecycle|useMount', module) .add('Docs', () => ) .add('Demo', () => ) diff --git a/src/__stories__/usePromise.story.tsx b/src/__stories__/usePromise.story.tsx index bcd2fa49..f420092b 100644 --- a/src/__stories__/usePromise.story.tsx +++ b/src/__stories__/usePromise.story.tsx @@ -35,7 +35,7 @@ const Demo = () => { ); }; -storiesOf('Lifecycles|usePromise', module) +storiesOf('Lifecycle|usePromise', module) .add('Docs', () => ) .add('Demo', () => diff --git a/src/__stories__/useRaf.story.tsx b/src/__stories__/useRaf.story.tsx index a9d1fd44..6cb06eaf 100644 --- a/src/__stories__/useRaf.story.tsx +++ b/src/__stories__/useRaf.story.tsx @@ -13,7 +13,7 @@ const Demo = () => { ); }; -storiesOf('Animations|useRaf', module) +storiesOf('Animation|useRaf', module) .add('Docs', () => ) .add('Demo', () => diff --git a/src/__stories__/useRefMounted.story.tsx b/src/__stories__/useRefMounted.story.tsx index 1a8fdca5..9dff3f79 100644 --- a/src/__stories__/useRefMounted.story.tsx +++ b/src/__stories__/useRefMounted.story.tsx @@ -13,7 +13,7 @@ const Demo = () => { ); }; -storiesOf('Lifecycles|useRefMounted', module) +storiesOf('Lifecycle|useRefMounted', module) .add('Docs', () => ) .add('Demo', () => diff --git a/src/__stories__/useSpring.story.tsx b/src/__stories__/useSpring.story.tsx index 770722da..8855b632 100644 --- a/src/__stories__/useSpring.story.tsx +++ b/src/__stories__/useSpring.story.tsx @@ -17,7 +17,7 @@ const Demo = () => { ); }; -storiesOf('Animations|useSpring', module) +storiesOf('Animation|useSpring', module) .add('Docs', () => ) .add('Demo', () => diff --git a/src/__stories__/useTimeout.story.tsx b/src/__stories__/useTimeout.story.tsx index cb444f3b..39748f80 100644 --- a/src/__stories__/useTimeout.story.tsx +++ b/src/__stories__/useTimeout.story.tsx @@ -13,7 +13,7 @@ const Demo = () => { ); }; -storiesOf('Animations|useTimeout', module) +storiesOf('Animation|useTimeout', module) .add('Docs', () => ) .add('Demo', () => diff --git a/src/__stories__/useTween.story.tsx b/src/__stories__/useTween.story.tsx index e1b0075d..6d0e83ba 100644 --- a/src/__stories__/useTween.story.tsx +++ b/src/__stories__/useTween.story.tsx @@ -13,7 +13,7 @@ const Demo = () => { ); }; -storiesOf('Animations|useTween', module) +storiesOf('Animation|useTween', module) .add('Docs', () => ) .add('Demo', () => diff --git a/src/__stories__/useUnmount.story.tsx b/src/__stories__/useUnmount.story.tsx index 39ae0193..3255d3f1 100644 --- a/src/__stories__/useUnmount.story.tsx +++ b/src/__stories__/useUnmount.story.tsx @@ -10,7 +10,7 @@ const Demo = () => { return ; }; -storiesOf('Lifecycles|useUnmount', module) +storiesOf('Lifecycle|useUnmount', module) .add('Docs', () => ) .add('Demo', () => ) diff --git a/src/__stories__/useUpdate.story.tsx b/src/__stories__/useUpdate.story.tsx index 3a37fd91..85465b37 100644 --- a/src/__stories__/useUpdate.story.tsx +++ b/src/__stories__/useUpdate.story.tsx @@ -13,7 +13,7 @@ const Demo = () => { ); }; -storiesOf('Animations|useUpdate', module) +storiesOf('Animation|useUpdate', module) .add('Docs', () => ) .add('Demo', () => diff --git a/src/__stories__/useUpdateEffect.story.tsx b/src/__stories__/useUpdateEffect.story.tsx index 98bd1440..9cd92d7e 100644 --- a/src/__stories__/useUpdateEffect.story.tsx +++ b/src/__stories__/useUpdateEffect.story.tsx @@ -19,7 +19,7 @@ const Demo = () => { ); }; -storiesOf('useUpdateEffect', module) +storiesOf('Lifecycle|useUpdateEffect', module) .add('Docs', () => ) .add('Demo', () => diff --git a/src/useMethods.ts b/src/useMethods.ts new file mode 100644 index 00000000..0d266a66 --- /dev/null +++ b/src/useMethods.ts @@ -0,0 +1,24 @@ +import {useMemo, useReducer} from 'react'; + +const useMethods = (createMethods, initialState) => { + const reducer = useMemo( + () => (state, action) => { + return createMethods(state)[action.type](...action.payload); + }, + [createMethods] + ); + + const [state, dispatch] = useReducer(reducer, initialState); + + const wrappedMethods = useMemo(() => { + const actionTypes = Object.keys(createMethods(initialState)); + return actionTypes.reduce((acc, type) => { + acc[type] = (...payload) => dispatch({ type, payload }); + return acc; + }, {}); + }, []); + + return [state, wrappedMethods]; +} + +export default useMethods;