Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
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: about 2 months ago
JSON representation
Essential React custom hooks ⚓ to super charge your components!
Host: GitHub
URL: https://github.com/imbhargav5/rooks
Owner: imbhargav5
License: mit
Created: 2018-11-08T16:14:39.000Z (almost 6 years ago)
Default Branch: main
Last Pushed: 2024-05-23T19:35:58.000Z (4 months ago)
Last Synced: 2024-06-16T12:58:35.456Z (3 months ago)
Topics: hook, hooks, react, react-hook, react-hooks, reactjs, rooks, typescript
Language: TypeScript
Homepage: https://rooks.vercel.app
Size: 18.8 MB
Stars: 3,151
Watchers: 20
Forks: 215
Open Issues: 7
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project

awesome-list - rooks
awesome-react-hooks - rooks - Essential React custom hooks ⚓ to super charge your components! (Packages)
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}
💻 🚧

      
_{anil kumar chaudhary}
💻

      
_{Qiwei Yang}
💻 🚧

      
_{maciek_grzybek}
💻

      
_{Harsh Zalavadiya}
💻

      
_{B V K MAHIJENDRA}
💻

      
_{Braxton Christensen}
💻

    

    

      
_Hansel
💻

      
_{Harshil Parmar}
💻

      
_Lionel
💻

      
_{Max Stoiber}
💻

      
_{Michael Moore}
💻

      
_{Rajas Paranjpe}
💻

      
_{Mahendra Choudhary}
💻

    

    

      
_{Nghia Pham}
💻

      
_{Akshay Kadam (A2K)}
💻

      
_{Alex Golubtsov}
💻

      
_Arman
💻

      
_{Branden Visser}
💻

      
_{Brian Steere}
💻

      
_{Cal Courtney}
💻

    

    

      
_{Chris Milson}
💻

      
_{Cong Zhang}
💻

      
_{Daniel Holmes}
💻

      
_{Fernando Beck}
💻

      
_{Josh Davenport}
💻

      
_MARCEL
💻

      
_{Neilor Caldeira}
💻

    

    

      
_{Tobias Lins}
💻

      
_Tsvetan
💻

      
_{Wei Zhu}
💻

      
_{Yakko Majuri}
💻

      
_{Frank Hellwig}
💻

      
_{Austin Peterson}
💻

      
_thodubois
💻

    

    

      
_{wes christiansen}
💻

      
_{CJ Patoilo}
💻

      
_mar1u50
💻

      
_{Ayushman Gupta}
💻

      
_{Rafael Ferreira}
💻

      
_{Kristinn Thor Johannsson}
💻

      
_{Michael Moore}
💻

    

    

      
_{Trevor Blades}
💻

      
_{official_dulin}
💻

      
_{Billy Mosis Priambodo}
💻

      
_{Stafford Williams}
💻

      
_{Chanhee Kim}
💻

      
_Hooriza
💻

      
_{Nils Wittler}
💻

    

    

      
_{Sebastian Szczepański}
💻

      
_{Mahendra Choudhary}
💻

      
_{Som Shekhar Mukherjee}
💻

      
_{Qiushi Pan}
💻

      
_{Jishnu Viswanath}
💻

      
_brahambence
💻

      
_{dependabot[bot]}
💻

    

    

      
_{renovate[bot]}
💻

      
_{dependabot-preview[bot]}
💻

      
_{github-actions[bot]}
💻

      
_{allcontributors[bot]}
💻

      
_zhangenming
💻

      
_{Antoni Kiszka}
💻

      
_{Greg Poole}
💻

    

    

      
_mergify[bot]
💻

      
_{Chaitanya J}
💻

      
_{G H Mahimaanvita}
💻

      
_{Danilo Woznica}
💻

      
_dan-klasson
💻

      
_{Sébastien Vanvelthem}
💻

      
_{Aleksandr Soldatov}
💻

    

    

      
_{Eli Yukelzon}
💻

      
_{Mahendra Choudhary}
💻

      
_{Chaitanya J}
💻

      
_{Dominik Dorfmeister}
💻

      
_Nghiệp
💻

      
_{Seongmin Park}
💻

      
_{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/)