docs: update readme + fixing docs

README.md

@@ -13,9 +13,18 @@
   <sup>
     <br />
     <br />
+    <a href="https://www.npmjs.com/package/react-use">
+      <img src="https://img.shields.io/npm/v/react-use.svg" alt="npm package" />
+    </a>
+    <a href="https://www.npmjs.com/package/react-use">
+      <img src="https://img.shields.io/npm/dm/react-use.svg" alt="npm downloads" />
+    </a>
+    <a href="http://streamich.github.io/react-use">
+      <img src="https://img.shields.io/badge/demos-🚀-yellow.svg" alt="demos" />
+    </a>
     <br />
     Collection of essential <a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a>.</em>
-    <em>Port of</em> <a href="https://github.com/streamich/libreact"><code>libreact</code></a>. <em>See <a href="http://streamich.github.io/react-use">demos</a>.</em>
+    <em>Port of</em> <a href="https://github.com/streamich/libreact"><code>libreact</code></a>.
     <br />
     Translations: <a href="https://github.com/zenghongtu/react-use-chinese/blob/master/README.md">🇨🇳 汉语</a>
   </sup>
@@ -127,6 +136,24 @@ You need to have React <code>16.8.1</code> or later installed to use Hooks API.
 You can import each hook individually <code>import useToggle from 'react-use/lib/useToggle'</code>.
 </p>
 
+<p align="center">
+or use ES6 named imports <code>import {useToggle} from 'react-use'</code>.
+</p>
+
+<p align="center">
+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 <a href="https://github.com/ant-design/babel-plugin-import">babel-plugin-import</a> by adding the following config to your `.babelrc` file:
+</p>
+
+```json
+[
+  "import", {
+    "libraryName": "react-use",
+    "libraryDirectory": "lib",
+    "camel2DashComponentName": false
+  }
+]
+```
+
 <br/>
 
 <h2 align="center"><sub>License</sub></h2>
@@ -134,5 +161,3 @@ You can import each hook individually <code>import useToggle from 'react-use/lib
 <p align="center">
   <a href="./LICENSE">Unlicense</a> &mdash; public domain.
 </p>
-
-[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg

docs/Lifecycle.md

@@ -0,0 +1,3 @@
+# Lifecycle
+
+*"Lifecycle Hooks"* modify and extend built-in React hooks or immitate React Class component lifecycle patterns.

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

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.
 
 

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
 

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

src/__stories__/useEffectOnce.story.tsx

@@ -16,6 +16,6 @@ const Demo = () => {
   return <ConsoleStory />;
 };
 
-storiesOf('Lifecycles|useEffectOnce', module)
+storiesOf('Lifecycle|useEffectOnce', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useEffectOnce.md')} />)
   .add('Demo', () => <Demo/>)

src/__stories__/useLifecycles.story.tsx

@@ -8,7 +8,7 @@ const Demo = () => {
   return null;
 };
 
-storiesOf('Lifecycles|useLifecycles', module)
+storiesOf('Lifecycle|useLifecycles', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useLifecycles.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useLogger.story.tsx

@@ -22,7 +22,7 @@ const Demo = (props) => {
   );
 };
 
-storiesOf('Lifecycles|useLogger', module)
+storiesOf('Lifecycle|useLogger', module)
   .addDecorator(withKnobs)
   .add('Docs', () => <ShowDocs md={require('../../docs/useLogger.md')} />)
   .add('Demo', () => {

src/__stories__/useMount.story.tsx

@@ -10,6 +10,6 @@ const Demo = () => {
   return <ConsoleStory />;
 };
 
-storiesOf('Lifecycles|useMount', module)
+storiesOf('Lifecycle|useMount', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useMount.md')} />)
   .add('Demo', () => <Demo/>)

src/__stories__/usePromise.story.tsx

@@ -35,7 +35,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Lifecycles|usePromise', module)
+storiesOf('Lifecycle|usePromise', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/usePromise.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useRaf.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Animations|useRaf', module)
+storiesOf('Animation|useRaf', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useRaf.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useRefMounted.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Lifecycles|useRefMounted', module)
+storiesOf('Lifecycle|useRefMounted', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useRefMounted.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useSpring.story.tsx

@@ -17,7 +17,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Animations|useSpring', module)
+storiesOf('Animation|useSpring', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useSpring.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useTimeout.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Animations|useTimeout', module)
+storiesOf('Animation|useTimeout', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useTimeout.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useTween.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Animations|useTween', module)
+storiesOf('Animation|useTween', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useTween.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useUnmount.story.tsx

@@ -10,7 +10,7 @@ const Demo = () => {
   return <ConsoleStory />;
 };
 
-storiesOf('Lifecycles|useUnmount', module)
+storiesOf('Lifecycle|useUnmount', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useUnmount.md')} />)
   .add('Demo', () => <Demo/>)
 

src/__stories__/useUpdate.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Animations|useUpdate', module)
+storiesOf('Animation|useUpdate', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useUpdate.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useUpdateEffect.story.tsx

@@ -19,7 +19,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('useUpdateEffect', module)
+storiesOf('Lifecycle|useUpdateEffect', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useUpdateEffect.md')} />)
   .add('Demo', () =>
     <Demo/>

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;