forked from streamich/react-use
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
143 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,134 +1,124 @@ | ||
| <div align="center"> | ||
| <h1> | ||
| <br/> | ||
| <br/> | ||
| 👍 | ||
| <br /> | ||
| react-use | ||
| <br /> | ||
| <br /> | ||
| <br /> | ||
| <br /> | ||
| </h1> | ||
| <sup> | ||
| <br /> | ||
| <br /> | ||
| <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> | ||
| <br /> | ||
| Translations: <a href="https://github.com/zenghongtu/react-use-chinese/blob/master/README.md">🇨🇳 汉语</a> | ||
| </sup> | ||
| <br /> | ||
| <br /> | ||
| <br /> | ||
| <br /> | ||
| <pre>npm i <a href="https://www.npmjs.com/package/react-use">react-use</a></pre> | ||
| <br /> | ||
| <br /> | ||
| <br /> | ||
| <br /> | ||
| <br /> | ||
| </div> | ||
|
|
||
| - [**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) | ||
| <br/> | ||
| <br/> | ||
| - [**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. | ||
| <br/> | ||
| <br/> | ||
| - [**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. | ||
| <br/> | ||
| <br/> | ||
| - [**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. | ||
| <br/> | ||
| <br/> | ||
| - [**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. | ||
| <br/> | ||
| <br/> | ||
| - [**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. | ||
| <br/> | ||
| <br/> | ||
|
|
||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <h2 align="center"><sub>Usage</sub></h2> | ||
|
|
||
| <br/> | ||
|
|
||
| <p align="center"> | ||
| You need to have React <code>16.8.1</code> or later installed to use Hooks API. | ||
| </p> | ||
|
|
||
| <p align="center"> | ||
| You can import each hook individually <code>import useToggle from 'react-use/lib/useToggle'</code>. | ||
| </p> | ||
|
|
||
| <br/> | ||
|
|
||
| <h2 align="center"><sub>License</sub></h2> | ||
|
|
||
| <p align="center"> | ||
| <a href="./LICENSE">Unlicense</a> — public domain. | ||
| </p> | ||
|
|
||
| [img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg | ||
| # 👍 react-use | ||
|
|
||
| [](https://www.npmjs.com/package/react-use) | ||
| [](https://www.npmjs.com/package/react-use) | ||
| [](http://streamich.github.io/react-use) | ||
|
|
||
| A collection of essential [React Hooks](https://reactjs.org/docs/hooks-intro.html). | ||
|
|
||
| ## 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. | ||
|
|
||
| ```bash | ||
| npm i react-use | ||
| ``` | ||
|
|
||
| ## [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 | ||
|
|
||
| ## [UI](./docs/UI.md) | ||
|
|
||
| - [`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 | ||
|
|
||
| ## [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. |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # Lifecycle | ||
|
|
||
| *"Lifecycle Hooks"* modify and extend built-in React hooks or immitate React Class component lifecycle patterns. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.