Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/streamich/react-use

React Hooks β€” πŸ‘
https://github.com/streamich/react-use

Last synced: about 6 hours ago
JSON representation

React Hooks β€” πŸ‘

Awesome Lists containing this project

README 

        


  


    


    


    πŸ‘

    


    react-use

    


    


    


    


  


  

    


    


    

       npm package

    

    

      CircleCI master

    

    

      npm downloads

    

    

      demos

    

    


    Collection of essential React Hooks.

    Port of libreact.

    


    Translations: πŸ‡¨πŸ‡³ 汉语

  

  


  


  


  


  
npm i 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)

  - [`useHash`](./docs/useHash.md) β€” tracks location hash value. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usehash--demo)

  - [`useIdle`](./docs/useIdle.md) β€” tracks whether user is being inactive.

  - [`useIntersection`](./docs/useIntersection.md) β€” tracks an HTML element's intersection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-useintersection--demo)

  - [`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) and [`useSearchParam`](./docs/useSearchParam.md) β€” tracks page navigation bar location state.

  - [`useLongPress`](./docs/useLongPress.md) β€” tracks long press gesture of some element.

  - [`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)

  - [`useMouseWheel`](./docs/useMouseWheel.md) β€” tracks deltaY of scrolled mouse wheel. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemousewheel--docs)

  - [`useNetworkState`](./docs/useNetworkState.md) β€” tracks the state of browser's network connection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usenetworkstate--demo)

  - [`useOrientation`](./docs/useOrientation.md) β€” tracks state of device's screen orientation.

  - [`usePageLeave`](./docs/usePageLeave.md) β€” triggers when mouse leaves page boundaries.

  - [`useScratch`](./docs/useScratch.md) β€” tracks mouse click-and-scrub state.

  - [`useScroll`](./docs/useScroll.md) β€” tracks an HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)

  - [`useScrolling`](./docs/useScrolling.md) β€” tracks whether HTML element is scrolling.

  - [`useStartTyping`](./docs/useStartTyping.md) β€” detects when user starts typing.

  - [`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)

  - [`useMeasure`](./docs/useMeasure.md) and [`useSize`](./docs/useSize.md) β€” tracks an HTML element's dimensions. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo)

  - [`createBreakpoint`](./docs/createBreakpoint.md) β€” tracks `innerWidth`

  - [`useScrollbarWidth`](./docs/useScrollbarWidth.md) β€” detects browser's native scrollbars width. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescrollbarwidth--demo)

  - [`usePinchZoom`](./docs/usePinchZoom.md) β€” tracks pointer events to detect pinch zoom in and out status. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usePinchZoom--demo)

    


    


- [**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)

  - [`useSlider`](./docs/useSlider.md) β€” provides slide behavior over any HTML element. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-useslider--demo)

  - [`useSpeech`](./docs/useSpeech.md) β€” synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)

  - [`useVibrate`](./docs/useVibrate.md) β€” provide physical feedback using the [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API). [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevibrate--demo)

  - [`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)

    


    


- [**Animations**](./docs/Animations.md)

  - [`useRaf`](./docs/useRaf.md) β€” re-renders component on each `requestAnimationFrame`.

  - [`useInterval`](./docs/useInterval.md) and [`useHarmonicIntervalFn`](./docs/useHarmonicIntervalFn.md) β€” re-renders component on a set interval using `setInterval`.

  - [`useSpring`](./docs/useSpring.md) β€” interpolates number over time according to spring dynamics.

  - [`useTimeout`](./docs/useTimeout.md) β€” re-renders component after a timeout.

  - [`useTimeoutFn`](./docs/useTimeoutFn.md) β€” calls given function after a timeout. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/animation-usetimeoutfn--demo)

  - [`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), [`useAsyncFn`](./docs/useAsyncFn.md), and [`useAsyncRetry`](./docs/useAsyncRetry.md) β€” resolves an `async` function.

  - [`useBeforeUnload`](./docs/useBeforeUnload.md) β€” shows browser alert when user try to reload or close the page.

  - [`useCookie`](./docs/useCookie.md) β€” provides way to read, update and delete a cookie. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usecookie--demo)

  - [`useCopyToClipboard`](./docs/useCopyToClipboard.md) β€” copies text to clipboard.

  - [`useDebounce`](./docs/useDebounce.md) β€” debounces a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usedebounce--demo)

  - [`useError`](./docs/useError.md) β€” error dispatcher. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-useerror--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.

  - [`useRafLoop`](./docs/useRafLoop.md) β€” calls given function inside the RAF loop.

  - [`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.

  - [`usePermission`](./docs/usePermission.md) β€” query permission status for browser APIs.

    


    


- [**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.

  - [`useMountedState`](./docs/useMountedState.md) and [`useUnmountPromise`](./docs/useUnmountPromise.md) β€” track 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.

  - [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) β€” `useLayoutEffect` that that works on server.

  - [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md), [`useShallowCompareEffect`](./docs/useShallowCompareEffect.md), and [`useCustomCompareEffect`](./docs/useCustomCompareEffect.md)

    


    


- [**State**](./docs/State.md)

  - [`createMemo`](./docs/createMemo.md) β€” factory of memoized hooks.

  - [`createReducer`](./docs/createReducer.md) β€” factory of reducer hooks with custom middleware.

  - [`createReducerContext`](./docs/createReducerContext.md) and [`createStateContext`](./docs/createStateContext.md) β€” factory of hooks for a sharing state between components.

  - [`useDefault`](./docs/useDefault.md) β€” returns the default value when state is `null` or `undefined`.

  - [`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.

  - [`useLatest`](./docs/useLatest.md) β€” returns the latest state or props

  - [`usePrevious`](./docs/usePrevious.md) β€” returns the previous state or props. [![][img-demo]](https://codesandbox.io/s/fervent-galileo-krgx6)

  - [`usePreviousDistinct`](./docs/usePreviousDistinct.md) β€” like `usePrevious` but with a predicate to determine if `previous` should update.

  - [`useObservable`](./docs/useObservable.md) β€” tracks latest value of an `Observable`.

  - [`useRafState`](./docs/useRafState.md) β€” creates `setState` method which only updates after `requestAnimationFrame`. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userafstate--demo)

  - [`useSetState`](./docs/useSetState.md) β€” creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0)

  - [`useStateList`](./docs/useStateList.md) β€” circularly iterates over an array. [![][img-demo]](https://codesandbox.io/s/bold-dewdney-pjzkd)

  - [`useToggle` and `useBoolean`](./docs/useToggle.md) β€” tracks state of a boolean. [![][img-demo]](https://codesandbox.io/s/focused-sammet-brw2d)

  - [`useCounter` and `useNumber`](./docs/useCounter.md) β€” tracks state of a number. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usecounter--demo)

  - [`useList`](./docs/useList.md) ~and [`useUpsert`](./docs/useUpsert.md)~ β€” tracks state of an array. [![][img-demo]](https://codesandbox.io/s/wonderful-mahavira-1sm0w)

  - [`useMap`](./docs/useMap.md) β€” tracks state of an object. [![][img-demo]](https://codesandbox.io/s/quirky-dewdney-gi161)

  - [`useSet`](./docs/useSet.md) β€” tracks state of a Set. [![][img-demo]](https://codesandbox.io/s/bold-shtern-6jlgw)

  - [`useQueue`](./docs/useQueue.md) β€” implements simple queue.

  - [`useStateValidator`](./docs/useStateValidator.md) β€” tracks state of an object. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatevalidator--demo)

  - [`useStateWithHistory`](./docs/useStateWithHistory.md) β€” stores previous state values and provides handles to travel through them. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatewithhistory--demo)

  - [`useMultiStateValidator`](./docs/useMultiStateValidator.md) β€” alike the `useStateValidator`, but tracks multiple states at a time. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemultistatevalidator--demo)

  - [`useMediatedState`](./docs/useMediatedState.md) β€” like the regular `useState` but with mediation by custom function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemediatedstate--demo)

  - [`useFirstMountState`](./docs/useFirstMountState.md) β€” check if current render is first. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usefirstmountstate--demo)

  - [`useRendersCount`](./docs/useRendersCount.md) β€” count component renders. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userenderscount--demo)

  - [`createGlobalState`](./docs/createGlobalState.md) β€” cross component shared state.[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-createglobalstate--demo)

  - [`useMethods`](./docs/useMethods.md) β€” neat alternative to `useReducer`. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemethods--demo)

    


    


- [**Miscellaneous**]()

  - [`useEnsuredForwardedRef`](./docs/useEnsuredForwardedRef.md) and [`ensuredForwardRef`](./docs/useEnsuredForwardedRef.md) β€” use a React.forwardedRef safely. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-useensuredforwardedref--demo)



























  Usage β€” how to import.

  


  Unlicense β€” public domain.

  


  Support β€” add yourself to backer list below.




















[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg





  
Contributors