From fac14b03defe3d465edab2899f354ba05489eb3f Mon Sep 17 00:00:00 2001 From: Ward Oosterlijnck Date: Tue, 2 Apr 2019 20:02:13 +1100 Subject: [PATCH 1/2] Update readme + fixing docs --- README.md | 238 +++++++++++----------- docs/{Animations.md => Animation.md} | 0 docs/Lifecycle.md | 3 + docs/useMouse.md | 6 +- docs/useRaf.md | 2 +- docs/useSpeech.md | 2 - docs/useTween.md | 3 - src/__stories__/useEffectOnce.story.tsx | 2 +- src/__stories__/useLifecycles.story.tsx | 2 +- src/__stories__/useLogger.story.tsx | 2 +- src/__stories__/useMount.story.tsx | 2 +- src/__stories__/usePromise.story.tsx | 2 +- src/__stories__/useRaf.story.tsx | 2 +- src/__stories__/useRefMounted.story.tsx | 2 +- src/__stories__/useSpring.story.tsx | 2 +- src/__stories__/useTimeout.story.tsx | 2 +- src/__stories__/useTween.story.tsx | 2 +- src/__stories__/useUnmount.story.tsx | 2 +- src/__stories__/useUpdate.story.tsx | 2 +- src/__stories__/useUpdateEffect.story.tsx | 2 +- 20 files changed, 133 insertions(+), 147 deletions(-) rename docs/{Animations.md => Animation.md} (100%) create mode 100644 docs/Lifecycle.md diff --git a/README.md b/README.md index 74449a3c..b709f937 100644 --- a/README.md +++ b/README.md @@ -1,134 +1,124 @@ -
-

-
-
- 👍 -
- react-use -
-
-
-
-

- -
-
-
- Collection of essential React Hooks. - Port of libreact. See demos. -
- Translations: 🇨🇳 汉语 - -
-
-
-
- 
npm i react-use
-
-
-
-
-
-
+# 👍 react-use -- [**Sensors**](./docs/Sensors.md) - - [`useBattery`](./docs/useBattery.md) — tracks device battery state. [![][img-demo]](https://codesandbox.io/s/qlvn662zww) - - [`useGeolocation`](./docs/useGeolocation.md) — tracks geo location state of user's device. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usegeolocation--demo) - - [`useHover` and `useHoverDirty`](./docs/useHover.md) — tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx) - - [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive. - - [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), [`useKeyboardJs`](./docs/useKeyboardJs.md), and [`useKeyPressEvent`](./docs/useKeyPressEvent.md) — track keys. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo) - - [`useLocation`](./docs/useLocation.md) — tracks page navigation bar location state. - - [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo) - - [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices. - - [`useMotion`](./docs/useMotion.md) — tracks state of device's motion sensor. - - [`useMouse` and `useMouseHovered`](./docs/useMouse.md) — tracks state of mouse position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs) - - [`useNetwork`](./docs/useNetwork.md) — tracks state of user's internet connection. - - [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation. - - [`usePageLeave`](./docs/usePageLeave.md) — triggers when mouse leaves page boundaries. - - [`useScroll`](./docs/useScroll.md) — tracks an HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs) - - [`useSize`](./docs/useSize.md) — tracks an HTML element's dimensions. - - [`useWindowScroll`](./docs/useWindowScroll.md) — tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs) - - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668) -
-
-- [**UI**](./docs/UI.md) - - [`useAudio`](./docs/useAudio.md) — plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/2o4lo6rqy) - - [`useClickAway`](./docs/useClickAway.md) — triggers callback when user clicks outside target area. - - [`useCss`](./docs/useCss.md) — dynamically adjusts CSS. - - [`useDrop` and `useDropArea`](./docs/useDrop.md) — tracks file, link and copy-paste drops. - - [`useFullscreen`](./docs/useFullscreen.md) — display an element or video full-screen. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usefullscreen--demo) - - [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m) - - [`useVideo`](./docs/useVideo.md) — plays video, tracks its state, and exposes playback controls. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo) - - [`useWait`](./docs/useWait.md) — complex waiting management for UIs. -
-
-- [**Animations**](./docs/Animations.md) - - [`useRaf`](./docs/useRaf.md) — re-renders component on each `requestAnimationFrame`. - - [`useSpring`](./docs/useSpring.md) — interpolates number over time according to spring dynamics. - - [`useTimeout`](./docs/useTimeout.md) — returns true after a timeout. - - [`useTween`](./docs/useTween.md) — re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl) - - [`useUpdate`](./docs/useUpdate.md) — returns a callback, which re-renders component when called. -
-
-- [**Side-effects**](./docs/Side-effects.md) - - [`useAsync`](./docs/useAsync.md) — resolves an `async` function. - - [`useAsyncRetry`](./docs/useAsyncRetry.md) — `useAsync` with `retry()` method. - - [`useDebounce`](./docs/useDebounce.md) — debounces a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usedebounce--demo) - - [`useFavicon`](./docs/useFavicon.md) — sets favicon of the page. - - [`useLocalStorage`](./docs/useLocalStorage.md) — manages a value in `localStorage`. - - [`useLockBodyScroll`](./docs/useLockBodyScroll.md) — lock scrolling of the body element. - - [`useSessionStorage`](./docs/useSessionStorage.md) — manages a value in `sessionStorage`. - - [`useThrottle` and `useThrottleFn`](./docs/useThrottle.md) — throttles a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usethrottle--demo) - - [`useTitle`](./docs/useTitle.md) — sets title of the page. -
-
-- [**Lifecycles**](./docs/Lifecycles.md) - - [`useEffectOnce`](./docs/useEffectOnce.md) — a modified [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) hook that only runs once. - - [`useEvent`](./docs/useEvent.md) — subscribe to events. - - [`useLifecycles`](./docs/useLifecycles.md) — calls `mount` and `unmount` callbacks. - - [`useRefMounted`](./docs/useRefMounted.md) — tracks if component is mounted. - - [`usePromise`](./docs/usePromise.md) — resolves promise only while component is mounted. - - [`useLogger`](./docs/useLogger.md) — logs in console as component goes through life-cycles. - - [`useMount`](./docs/useMount.md) — calls `mount` callbacks. - - [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks. - - [`useUpdateEffect`](./docs/useUpdateEffect.md) — run an `effect` only on updates. -
-
-- [**State**](./docs/State.md) - - [`createMemo`](./docs/createMemo.md) — factory of memoized hooks. - - [`useGetSet`](./docs/useGetSet.md) — returns state getter `get()` instead of raw state. - - [`useGetSetState`](./docs/useGetSetState.md) — as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby. - - [`useObservable`](./docs/useObservable.md) — tracks latest value of an `Observable`. - - [`useSetState`](./docs/useSetState.md) — creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0) - - [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean. - - [`useCounter` and `useNumber`](./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. -
-
+[![npm package](https://img.shields.io/npm/v/react-use.svg)](https://www.npmjs.com/package/react-use) +[![npm downloads](https://img.shields.io/npm/dm/react-use.svg)](https://www.npmjs.com/package/react-use) +[![demos](https://img.shields.io/badge/demos-🚀-yellow.svg)](http://streamich.github.io/react-use) -
-
-
+A collection of essential [React Hooks](https://reactjs.org/docs/hooks-intro.html). -

Usage

+## Setup -
+You need to have [React `16.8.0`](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) or later installed to use the Hooks API. -

-You need to have React 16.8.1 or later installed to use Hooks API. -

+```bash +npm i react-use +``` -

-You can import each hook individually import useToggle from 'react-use/lib/useToggle'. -

+## [Sensors](./docs/Sensors.md) -
+- [`useBattery`](./docs/useBattery.md) — track device battery state +- [`useGeolocation`](./docs/useGeolocation.md) — track geo location state of user's device +- [`useHover` and `useHoverDirty`](./docs/useHover.md) — track mouse hover state of some element +- [`useIdle`](./docs/useIdle.md) — track whether user is being inactive +- [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), [`useKeyboardJs`](./docs/useKeyboardJs.md), and [`useKeyPressEvent`](./docs/useKeyPressEvent.md) — track keyboard input +- [`useLocation`](./docs/useLocation.md) — track window location state +- [`useMedia`](./docs/useMedia.md) — track a CSS media query +- [`useMediaDevices`](./docs/useMediaDevices.md) — track state of connected hardware devices +- [`useMotion`](./docs/useMotion.md) — track state of device's motion sensor +- [`useMouse` and `useMouseHovered`](./docs/useMouse.md) — track state of mouse position +- [`useNetwork`](./docs/useNetwork.md) — track state of user's internet connection +- [`useOrientation`](./docs/useOrientation.md) — track state of device's screen orientation +- [`usePageLeave`](./docs/usePageLeave.md) — trigger callback when mouse leaves page boundaries +- [`useScroll`](./docs/useScroll.md) — track an HTML element's scroll position +- [`useSize`](./docs/useSize.md) — track an HTML element's dimensions +- [`useWindowScroll`](./docs/useWindowScroll.md) — track `Window` scroll position +- [`useWindowSize`](./docs/useWindowSize.md) — track `Window` dimensions -

License

+## [UI](./docs/UI.md) -

- Unlicense — public domain. -

+- [`useAudio`](./docs/useAudio.md) — play audio, track its state and hook up controls +- [`useClickAway`](./docs/useClickAway.md) — trigger callback when user clicks outside target area +- [`useCss`](./docs/useCss.md) — dynamically adjusts CSS +- [`useDrop` and `useDropArea`](./docs/useDrop.md) — track file, link and copy-paste drops +- [`useFullscreen`](./docs/useFullscreen.md) — display an element or video full-screen +- [`useSpeech`](./docs/useSpeech.md) — synthesize speech audio from a text string +- [`useVideo`](./docs/useVideo.md) — play video, track its state and hook up playback controls +- [`useWait`](./docs/useWait.md) — complex waiting management for UIs -[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg +## [Animation](./docs/Animation.md) + +- [`useRaf`](./docs/useRaf.md) — re-render component on each `requestAnimationFrame` +- [`useSpring`](./docs/useSpring.md) — interpolate number over time according to spring dynamics +- [`useTimeout`](./docs/useTimeout.md) — returns true after a timeout +- [`useTween`](./docs/useTween.md) — re-renders component, while tweening a number from 0 to 1 +- [`useUpdate`](./docs/useUpdate.md) — returns a callback, which re-renders component when called + +## [Side-effects](./docs/Side-effects.md) + +- [`useAsync`](./docs/useAsync.md) — resolve an `async` function +- [`useAsyncRetry`](./docs/useAsyncRetry.md) — `useAsync` with a `retry()` callback +- [`useDebounce`](./docs/useDebounce.md) — debounce a function +- [`useFavicon`](./docs/useFavicon.md) — set favicon of the page +- [`useLocalStorage`](./docs/useLocalStorage.md) — manage a value in `localStorage` +- [`useLockBodyScroll`](./docs/useLockBodyScroll.md) — lock scrolling of the body element +- [`useSessionStorage`](./docs/useSessionStorage.md) — manage a value in `sessionStorage` +- [`useThrottle` and `useThrottleFn`](./docs/useThrottle.md) — throttle a function +- [`useTitle`](./docs/useTitle.md) — set title of the page + +## [Lifecycle](./docs/Lifecycle.md) + +- [`useEffectOnce`](./docs/useEffectOnce.md) — a modified [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) hook that runs an `effect` only once +- [`useEvent`](./docs/useEvent.md) — subscribe to events +- [`useLifecycles`](./docs/useLifecycles.md) — call `mount` and `unmount` callbacks +- [`useRefMounted`](./docs/useRefMounted.md) — track if component is mounted +- [`usePromise`](./docs/usePromise.md) — resolve promise only while component is mounted +- [`useLogger`](./docs/useLogger.md) — `console.log` as component goes through lifecycles +- [`useMount`](./docs/useMount.md) — run an `effect` on mount +- [`useUnmount`](./docs/useUnmount.md) — run an `effect` on unmount +- [`useUpdateEffect`](./docs/useUpdateEffect.md) — run an `effect` only on updates + +## [State](./docs/State.md) + +- [`createMemo`](./docs/createMemo.md) — factory of memoized hooks +- [`useGetSet`](./docs/useGetSet.md) — returns state getter `get()` instead of raw state +- [`useGetSetState`](./docs/useGetSetState.md) — as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby +- [`useObservable`](./docs/useObservable.md) — track latest value of an `Observable`. +- [`useSetState`](./docs/useSetState.md) — creates `setState` method which works like `this.setState` +- [`useToggle` and `useBoolean`](./docs/useToggle.md) — track state of a boolean +- [`useCounter` and `useNumber`](./docs/useCounter.md) — track state of a number +- [`useList`](./docs/useList.md) — track state of an array +- [`useMap`](./docs/useMap.md) — track state of an object + +## Usage + +You can import each hook individually + +```js +import useToggle from 'react-use/lib/useToggle' +``` + +or use ES6 named import + +```js +import {useToggle} from 'react-use' +``` + +Depending on your bundler you might run into a missing dependency error. 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`](https://github.com/ant-design/babel-plugin-import) by adding the following config to your `.babelrc` file + +```json +[ + "import", { + "libraryName": "react-use", + "libraryDirectory": "lib", + "camel2DashComponentName": false + } +] +``` + +## Translations + +[🇨🇳_汉语](https://github.com/zenghongtu/react-use-chinese/blob/master/README.md) + +## License + +[Unlicense](./LICENSE) — public domain. 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', () => From 1a63a0dc0d958998bc9e52761fc2dd01a63dd3f2 Mon Sep 17 00:00:00 2001 From: Ward Oosterlijnck Date: Mon, 8 Apr 2019 21:39:28 +1000 Subject: [PATCH 2/2] Added named import example to readme --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 206a2fa4..451ccf29 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,11 @@ You can import each hook individually import useToggle from 'react-use/lib

-Depending on your bundler you might run into a missing dependency error. 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: +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