Data

Tools

Indexes

Applications

Experiments

Awesome

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

https://github.com/imbhargav5/rooks

Essential React custom hooks ⚓ to super charge your components!
https://github.com/imbhargav5/rooks

hook hooks react react-hook react-hooks reactjs rooks typescript

Last synced: 6 months ago
JSON representation

Essential React custom hooks ⚓ to super charge your components!

Awesome Lists containing this project

README 

          








  







[![CI and Semantic Release](https://github.com/imbhargav5/rooks/actions/workflows/ci-release.yml/badge.svg)](https://github.com/imbhargav5/rooks/actions/workflows/ci-release.yml) ![GitHub](https://img.shields.io/github/license/imbhargav5/rooks) ![GitHub release (latest by date)](https://img.shields.io/github/v/release/imbhargav5/rooks) [![GitHub contributors](https://img.shields.io/github/contributors/imbhargav5/rooks)](#contributors) ![npm](https://img.shields.io/npm/dw/rooks) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/rooks) ![Codecov branch](https://img.shields.io/codecov/c/github/imbhargav5/rooks/main) ![node-lts](https://img.shields.io/node/v-lts/rooks) [![Website](https://img.shields.io/website?url=https%3A%2F%2Freact-hooks.org)](https://rooks.vercel.app) ![Module](https://img.shields.io/badge/module-umd%2Ccjs%2Cesm-brightgreen)













Essential React custom hooks ⚓ to super charge your components! 









  

  

  








**
List of all hooks
**



**
🔥 Effects
**



*   [useAsyncEffect](https://rooks.vercel.app/docs/useAsyncEffect) - A version of useEffect that accepts an async function

*   [useDeepCompareEffect](https://rooks.vercel.app/docs/useDeepCompareEffect) - Deep compare dependencies instead of shallow for useEffect

*   [useDidMount](https://rooks.vercel.app/docs/useDidMount) - componentDidMount hook for React

*   [useDidUpdate](https://rooks.vercel.app/docs/useDidUpdate) - componentDidUpdate hook for react

*   [useDocumentTitle](https://rooks.vercel.app/docs/useDocumentTitle) - A hook to easily update document title with React

*   [useEffectOnceWhen](https://rooks.vercel.app/docs/useEffectOnceWhen) - Runs a callback effect atmost one time when a condition becomes true

*   [useIntervalWhen](https://rooks.vercel.app/docs/useIntervalWhen) - Sets an interval immediately when a condition is true

*   [useIsomorphicEffect](https://rooks.vercel.app/docs/useIsomorphicEffect) - A hook that resolves to useEffect on the server and useLayoutEffect on the client.

*   [useLifecycleLogger](https://rooks.vercel.app/docs/useLifecycleLogger) - A react hook that console logs parameters as component transitions through lifecycles.

*   [useLockBodyScroll](https://rooks.vercel.app/docs/useLockBodyScroll) - This hook locks the scroll of the body element when `isLocked` is set to `true`.

*   [useMouseMoveDelta](https://rooks.vercel.app/docs/useMouseMoveDelta) - Tracks delta of mouse move

*   [useMouseWheelDelta](https://rooks.vercel.app/docs/useMouseWheelDelta) - Tracks delta of mouse move

*   [useWillUnmount](https://rooks.vercel.app/docs/useWillUnmount) - componentWillUnmount lifecycle as hook for React.



**
🚀 Events
**



*   [useDocumentEventListener](https://rooks.vercel.app/docs/useDocumentEventListener) - A react hook to an event listener to the document object

*   [useDocumentVisibilityState](https://rooks.vercel.app/docs/useDocumentVisibilityState) - Returns the visibility state of the document.

*   [useFocus](https://rooks.vercel.app/docs/useFocus) - Handles focus events for the immediate target element.

*   [useFocusWithin](https://rooks.vercel.app/docs/useFocusWithin) - Handles focus events for the target component.

*   [useIsDroppingFiles](https://rooks.vercel.app/docs/useIsDroppingFiles) - Check if any files are currently being dropped anywhere. Useful for highlighting drop areas.

*   [useOnClickRef](https://rooks.vercel.app/docs/useOnClickRef) - Callback on click/tap events

*   [useOnHoverRef](https://rooks.vercel.app/docs/useOnHoverRef) - On hover callback hook

*   [useOnLongHover](https://rooks.vercel.app/docs/useOnLongHover) - Fires a callback when an element is hovered for a while

*   [useOnLongPress](https://rooks.vercel.app/docs/useOnLongPress) - Fire a callback on long press

*   [useOnWindowResize](https://rooks.vercel.app/docs/useOnWindowResize) - A React hook for adding an event listener for window resize

*   [useOnWindowScroll](https://rooks.vercel.app/docs/useOnWindowScroll) - A React hook for adding an event listener for window scroll

*   [useOutsideClick](https://rooks.vercel.app/docs/useOutsideClick) - Outside click(for a ref) event as hook for React.

*   [useOutsideClickRef](https://rooks.vercel.app/docs/useOutsideClickRef) - A hook that can track a click event outside a ref. Returns a callbackRef.

*   [useWindowEventListener](https://rooks.vercel.app/docs/useWindowEventListener) - Adds an event listener to window



**
📝 Form
**



*   [useFileDropRef](https://rooks.vercel.app/docs/useFileDropRef) - Drop files easily

*   [useInput](https://rooks.vercel.app/docs/useInput) - Input hook for React.



**
✨ Misc
**



*   [useDebounce](https://rooks.vercel.app/docs/useDebounce) - Debounce hook for react

*   [useDebounceFn](https://rooks.vercel.app/docs/useDebounceFn) - Powerful debounce function hook for React

*   [useDebouncedValue](https://rooks.vercel.app/docs/useDebouncedValue) - Tracks another value and gets updated in a debounced way.

*   [useDimensionsRef](https://rooks.vercel.app/docs/useDimensionsRef) - Easily grab dimensions of an element with a ref using this hook

*   [useEventListenerRef](https://rooks.vercel.app/docs/useEventListenerRef) - A react hook to add an event listener to a ref

*   [useForkRef](https://rooks.vercel.app/docs/useForkRef) - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef

*   [useFreshCallback](https://rooks.vercel.app/docs/useFreshCallback) - Avoid stale closures and keep your callback fresh

*   [useFreshRef](https://rooks.vercel.app/docs/useFreshRef) - Avoid stale state in callbacks with this hook. Auto updates values using a ref.

*   [useFreshTick](https://rooks.vercel.app/docs/useFreshTick) - Like use-fresh-ref but specifically for functions

*   [useMergeRefs](https://rooks.vercel.app/docs/useMergeRefs) - Merges any number of refs into a single ref

*   [useOrientation](https://rooks.vercel.app/docs/useOrientation) - orientation hook for react

*   [useRefElement](https://rooks.vercel.app/docs/useRefElement) - Helps bridge gap between callback ref and state

*   [useRenderCount](https://rooks.vercel.app/docs/useRenderCount) - Get the render count of a component

*   [useSpeech](https://rooks.vercel.app/docs/useSpeech) - Speech synthesis hook for React

*   [useThrottle](https://rooks.vercel.app/docs/useThrottle) - Throttle custom hook for React

*   [useTimeoutWhen](https://rooks.vercel.app/docs/useTimeoutWhen) - Takes a callback and fires it when a condition is true

*   [useToggle](https://rooks.vercel.app/docs/useToggle) - Toggle (between booleans or custom data)hook for React.

*   [useVibrate](https://rooks.vercel.app/docs/useVibrate) - Vibration API hook for React

*   [useWhyDidYouUpdate](https://rooks.vercel.app/docs/useWhyDidYouUpdate) - A hook that can track which value change caused a rerender



**
🚃 Navigator
**



*   [useNavigatorLanguage](https://rooks.vercel.app/docs/useNavigatorLanguage) - Navigator Language hook for React.

*   [useOnline](https://rooks.vercel.app/docs/useOnline) - Online status hook for React.



**
❇️ State
**



*   [useArrayState](https://rooks.vercel.app/docs/useArrayState) - Array state manager hook for React

*   [useCountdown](https://rooks.vercel.app/docs/useCountdown) - Count down to a target timestamp and call callbacks every second (or provided peried)

*   [useCounter](https://rooks.vercel.app/docs/useCounter) - Counter hook for React.

*   [useGetIsMounted](https://rooks.vercel.app/docs/useGetIsMounted) - Checks if a component is mounted or not at the time. Useful for async effects

*   [useLocalstorageState](https://rooks.vercel.app/docs/useLocalstorageState) - UseState but auto updates values to localStorage

*   [useMapState](https://rooks.vercel.app/docs/useMapState) - A react hook to manage state in a key value pair map.

*   [useMultiSelectableList](https://rooks.vercel.app/docs/useMultiSelectableList) - A custom hook to easily select multiple values from a list

*   [useNativeMapState](https://rooks.vercel.app/docs/useNativeMapState) - Manage Map() object state in React

*   [usePreviousDifferent](https://rooks.vercel.app/docs/usePreviousDifferent) - usePreviousDifferent returns the last different value of a variable

*   [usePreviousImmediate](https://rooks.vercel.app/docs/usePreviousImmediate) - usePreviousImmediate returns the previous value of a variable even if it was the same or different

*   [usePromise](https://rooks.vercel.app/docs/usePromise) - Promise management hook for react

*   [useQueueState](https://rooks.vercel.app/docs/useQueueState) - A React hook that manages state in the form of a queue

*   [useSafeSetState](https://rooks.vercel.app/docs/useSafeSetState) - set state but ignores if component has already unmounted

*   [useSelect](https://rooks.vercel.app/docs/useSelect) - Select values from a list easily. List selection hook for react.

*   [useSelectableList](https://rooks.vercel.app/docs/useSelectableList) - Easily select a single value from a list of values. very useful for radio buttons, select inputs  etc.

*   [useSessionstorageState](https://rooks.vercel.app/docs/useSessionstorageState) - useState but syncs with sessionstorage

*   [useSetState](https://rooks.vercel.app/docs/useSetState) - Manage the state of a Set in React.

*   [useStackState](https://rooks.vercel.app/docs/useStackState) - A React hook that manages state in the form of a stack

*   [useTimeTravelState](https://rooks.vercel.app/docs/useTimeTravelState) - A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.

*   [useUndoRedoState](https://rooks.vercel.app/docs/useUndoRedoState) - Setstate but can also undo and redo

*   [useUndoState](https://rooks.vercel.app/docs/useUndoState) - Drop in replacement for useState hook but with undo functionality.



**
⚛️ UI
**



*   [useAudio](https://rooks.vercel.app/docs/useAudio) - Audio hook

*   [useBoundingclientrect](https://rooks.vercel.app/docs/useBoundingclientrect) - getBoundingClientRect hook for React.

*   [useBoundingclientrectRef](https://rooks.vercel.app/docs/useBoundingclientrectRef) - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked.

*   [useFullscreen](https://rooks.vercel.app/docs/useFullscreen) - Use full screen api for making beautiful and emersive experinces.

*   [useGeolocation](https://rooks.vercel.app/docs/useGeolocation) - A hook to provide the geolocation info on client side.

*   [useInViewRef](https://rooks.vercel.app/docs/useInViewRef) - Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.

*   [useIntersectionObserverRef](https://rooks.vercel.app/docs/useIntersectionObserverRef) - A hook to register an intersection observer listener.

*   [useKey](https://rooks.vercel.app/docs/useKey) - keypress, keyup and keydown event handlers as hooks for react.

*   [useKeyBindings](https://rooks.vercel.app/docs/useKeyBindings) - useKeyBindings can bind multiple keys to multiple callbacks and fire the callbacks on key press.

*   [useKeyRef](https://rooks.vercel.app/docs/useKeyRef) - Very similar useKey but it returns a ref

*   [useKeys](https://rooks.vercel.app/docs/useKeys) - A hook which allows to setup callbacks when a combination of keys are pressed at the same time.

*   [useMediaMatch](https://rooks.vercel.app/docs/useMediaMatch) - Signal whether or not a media query is currently matched.

*   [useMouse](https://rooks.vercel.app/docs/useMouse) - Mouse position hook for React.

*   [useMutationObserver](https://rooks.vercel.app/docs/useMutationObserver) - Mutation Observer hook for React.

*   [useMutationObserverRef](https://rooks.vercel.app/docs/useMutationObserverRef) - A hook that tracks mutations of an element. It returns a callbackRef.

*   [useRaf](https://rooks.vercel.app/docs/useRaf) - A continuously running requestAnimationFrame hook for React

*   [useResizeObserverRef](https://rooks.vercel.app/docs/useResizeObserverRef) - Resize Observer hook for React.

*   [useVideo](https://rooks.vercel.app/docs/useVideo) - Video hook for react

*   [useWindowScrollPosition](https://rooks.vercel.app/docs/useWindowScrollPosition) - A React hook to get the scroll position of the window

*   [useWindowSize](https://rooks.vercel.app/docs/useWindowSize) - Window size hook for React.










## Features



✅ Collection of 91 hooks as standalone modules.



✅ Standalone package with all the hooks at one place



✅ CommonJS, UMD and ESM Support



## Installation



    npm i -s rooks



Import any hook from "rooks" and start using them!



```jsx

import { useDidMount } from "rooks";

```



## Usage



```jsx

function App() {

  useDidMount(() => {

    alert("mounted");

  });

  return (

    


      
Hello CodeSandbox


      
Start editing to see some magic happen!


    


  );

}

```



## Standalone Package



Package containing all the hooks is over here. - [Docs](https://github.com/imbhargav5/rooks/tree/master/packages/rooks) and [Npm Install](https://npmjs.com/package/rooks)







## License



MIT



## Contributors ✨



[![All Contributors](https://img.shields.io/badge/all_contributors-77-orange.svg?style=flat-square)](#contributors-)



Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



  

    

      Bhargav Ponnapalli
Bhargav Ponnapalli
💻 🚧

      anil kumar chaudhary
anil kumar chaudhary
💻

      Qiwei Yang
Qiwei Yang
💻 🚧

      maciek_grzybek
maciek_grzybek
💻

      Harsh Zalavadiya
Harsh Zalavadiya
💻

      B V K MAHIJENDRA 
B V K MAHIJENDRA 
💻

      Braxton Christensen
Braxton Christensen
💻

    

    

      Hansel
Hansel
💻

      Harshil Parmar
Harshil Parmar
💻

      Lionel
Lionel
💻

      Max Stoiber
Max Stoiber
💻

      Michael Moore
Michael Moore
💻

      Rajas Paranjpe
Rajas Paranjpe
💻

      Mahendra Choudhary
Mahendra Choudhary
💻

    

    

      Nghia Pham
Nghia Pham
💻

      Akshay Kadam (A2K)
Akshay Kadam (A2K)
💻

      Alex Golubtsov
Alex Golubtsov
💻

      Arman
Arman
💻

      Branden Visser
Branden Visser
💻

      Brian Steere
Brian Steere
💻

      Cal Courtney
Cal Courtney
💻

    

    

      Chris Milson
Chris Milson
💻

      Cong Zhang
Cong Zhang
💻

      Daniel Holmes
Daniel Holmes
💻

      Fernando Beck
Fernando Beck
💻

      Josh Davenport
Josh Davenport
💻

      MARCEL
MARCEL
💻

      Neilor Caldeira
Neilor Caldeira
💻

    

    

      Tobias Lins
Tobias Lins
💻

      Tsvetan
Tsvetan
💻

      Wei Zhu
Wei Zhu
💻

      Yakko Majuri
Yakko Majuri
💻

      Frank Hellwig
Frank Hellwig
💻

      Austin Peterson
Austin Peterson
💻

      thodubois
thodubois
💻

    

    

      wes christiansen
wes christiansen
💻

      CJ Patoilo
CJ Patoilo
💻

      mar1u50
mar1u50
💻

      Ayushman Gupta
Ayushman Gupta
💻

      Rafael Ferreira
Rafael Ferreira
💻

      Kristinn Thor Johannsson
Kristinn Thor Johannsson
💻

      Michael Moore
Michael Moore
💻

    

    

      Trevor Blades
Trevor Blades
💻

      official_dulin
official_dulin
💻

      Billy Mosis Priambodo
Billy Mosis Priambodo
💻

      Stafford Williams
Stafford Williams
💻

      Chanhee Kim
Chanhee Kim
💻

      Hooriza
Hooriza
💻

      Nils Wittler
Nils Wittler
💻

    

    

      Sebastian Szczepański
Sebastian Szczepański
💻

      Mahendra Choudhary
Mahendra Choudhary
💻

      Som Shekhar Mukherjee
Som Shekhar Mukherjee
💻

      Qiushi Pan
Qiushi Pan
💻

      Jishnu Viswanath
Jishnu Viswanath
💻

      brahambence
brahambence
💻

      dependabot[bot]
dependabot[bot]
💻

    

    

      renovate[bot]
renovate[bot]
💻

      dependabot-preview[bot]
dependabot-preview[bot]
💻

      github-actions[bot]
github-actions[bot]
💻

      allcontributors[bot]
allcontributors[bot]
💻

      zhangenming
zhangenming
💻

      Antoni Kiszka
Antoni Kiszka
💻

      Greg Poole
Greg Poole
💻

    

    

      mergify[bot]
mergify[bot]
💻

      Chaitanya J
Chaitanya J
💻

      G H Mahimaanvita
G H Mahimaanvita
💻

      Danilo Woznica
Danilo Woznica
💻

      dan-klasson
dan-klasson
💻

      Sébastien Vanvelthem
Sébastien Vanvelthem
💻

      Aleksandr Soldatov
Aleksandr Soldatov
💻

    

    

      Eli Yukelzon
Eli Yukelzon
💻

      Mahendra Choudhary
Mahendra Choudhary
💻

      Chaitanya J
Chaitanya J
💻

      Dominik Dorfmeister
Dominik Dorfmeister
💻

      Nghiệp
Nghiệp
💻

      Seongmin Park
Seongmin Park
💻

      Nate Higgins
Nate Higgins
💻

    

  



## Other hooks libraries



These are some libraries that I constantly take inspiration and ideas from



1.  [React-use](https://github.com/streamich/react-use)

2.  [React-aria](https://react-spectrum.adobe.com/react-aria)

3.  [Valtio](https://github.com/pmndrs/valtio)

4.  [Jotai](https://github.com/pmndrs/jotai/tree/)

5.  [Recoil](https://recoiljs.org/)

6.  [Downshiftjs](https://www.downshift-js.com/)

7.  [React hook form](https://react-hook-form.com/)