GitHub release (latest by date) GitHub Codecov branch

npm npm bundle size node-lts

</p> <br/> <br/> <br/> <h2 align="center">Collection of awesome react hooks </h2> <br/> <p align="center"> <a target="_blank" rel="noopener noreferrer" href="https://vercel.com?utm_source=rooks&utm_campaign=oss" > <img src=".github/powered-by-vercel.svg" /> </a> </p> <br/>

⚠️ Contributing Notice

We are currently only accepting contributions from verified contributors. If you wish to contribute, please open an issue first to discuss your proposed changes.

<br/>

🚀 Quick Start

Get up and running in seconds:

npm install rooks
# or
yarn add rooks
# or
pnpm add rooks

Import any hook and start using it:

import { useDidMount, useCounter, useToggle } from "rooks";

function App() {
  const { value, increment, decrement } = useCounter(0);
  const [isOn, toggleIsOn] = useToggle(false);

  useDidMount(() => {
    console.log("Component mounted! 🎉");
  });

  return (
    <div>
      <h1>Count: {value}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>

      <h2>Toggle is {isOn ? "ON" : "OFF"}</h2>
      <button onClick={toggleIsOn}>Toggle</button>
    </div>
  );
}

📖 Browse all hooks • 🎮 Try in CodeSandbox

<br/>

✨ Why Rooks?

<table> <tr> <td align="center">🎯</td> <td><b>Focused</b><br/>Each hook does one thing well</td> <td align="center">📦</td> <td><b>Tree-shakeable</b><br/>Import only what you need</td> </tr> <tr> <td align="center">🔄</td> <td><b>SSR Ready</b><br/>Works with Next.js, Remix, Gatsby</td> <td align="center">🧪</td> <td><b>Well Tested</b><br/>95%+ code coverage</td> </tr> <tr> <td align="center">📚</td> <td><b>Documented</b><br/>Every hook has examples & demos</td> <td align="center">⚡</td> <td><b>TypeScript First</b><br/>Full type safety out of the box</td> </tr> <tr> <td align="center">🎨</td> <td><b>Modern</b><br/>Built for React 18+ with ESM</td> <td align="center">🤝</td> <td><b>Community Driven</b><br/>82 contributors and growing</td> </tr> </table> <br/>

🌟 Popular Hooks

State Management

<table> <tr> <td width="33%"> <b><a href="https://rooks.vercel.app/docs/hooks/useCounter">useCounter</a></b><br/> <sub>Counter with increment/decrement</sub> </td> <td width="33%"> <b><a href="https://rooks.vercel.app/docs/hooks/useToggle">useToggle</a></b><br/> <sub>Toggle between values</sub> </td> <td width="33%"> <b><a href="https://rooks.vercel.app/docs/hooks/useLocalstorageState">useLocalstorageState</a></b><br/> <sub>useState with localStorage sync</sub> </td> </tr> <tr> <td> <code>const { value, increment }</code><br/> <code>= useCounter(0)</code> </td> <td> <code>const [on, toggle]</code><br/> <code>= useToggle()</code> </td> <td> <code>const [user, setUser]</code><br/> <code>= useLocalstorageState('user')</code> </td> </tr> </table>

Event Handling

<table> <tr> <td width="33%"> <b><a href="https://rooks.vercel.app/docs/hooks/useKey">useKey</a></b><br/> <sub>Keyboard event handling</sub> </td> <td width="33%"> <b><a href="https://rooks.vercel.app/docs/hooks/useOutsideClick">useOutsideClick</a></b><br/> <sub>Detect clicks outside element</sub> </td> <td width="33%"> <b><a href="https://rooks.vercel.app/docs/hooks/useOnClickRef">useOnClickRef</a></b><br/> <sub>Click handler with ref</sub> </td> </tr> </table>

Lifecycle & Effects

<table> <tr> <td width="33%"> <b><a href="https://rooks.vercel.app/docs/hooks/useDidMount">useDidMount</a></b><br/> <sub>componentDidMount equivalent</sub> </td> <td width="33%"> <b><a href="https://rooks.vercel.app/docs/hooks/useWillUnmount">useWillUnmount</a></b><br/> <sub>componentWillUnmount equivalent</sub> </td> <td width="33%"> <b><a href="https://rooks.vercel.app/docs/hooks/useDebounce">useDebounce</a></b><br/> <sub>Debounce any value</sub> </td> </tr> </table> <br/>

<h2 align="center">List of all hooks</h2>

<details> <summary><h3>🎬 Animation & Timing - 10 hooks</h3></summary>

useAnimation - Animation hook for React
useEasing - A hook for creating controlled easing animations with start/stop/reset capabilities.
useIntervalWhen - Sets an interval immediately when a condition is true
useLockBodyScroll - This hook locks the scroll of the body element when isLocked is set to true.
usePrefersReducedMotion - A React hook that returns true if the user has enabled the 'prefers-reduced-motion' setting in their system.
useRaf - A continuously running requestAnimationFrame hook for React
useResizeObserverRef - Resize Observer hook for React.
useSpring - Spring animation hook for React
useTimeoutWhen - Takes a callback and fires it when a condition is true
useTween - Tween animation hook for React

</details> <details open> <summary><h3>🌐 Browser APIs - 16 hooks</h3></summary>

useBroadcastChannel - A React hook that provides a clean interface to the Broadcast Channel API for cross-tab/window communication
useClipboard - Clipboard read/write operations hook for React
useGeolocation - A hook to provide the geolocation info on client side.
useIdleDetectionApi - Hook to detect when user is idle using Idle Detection API with polyfill
useMediaRecorder - Audio/video recording from MediaStream
useNetworkInformation - Network connection quality detection hook for React
useNavigatorLanguage - Navigator Language hook for React.
useNotification - Browser notifications with permission handling
useOnline - Online status hook for React.
useOrientation - orientation hook for react
useScreenDetailsApi - Hook for multi-screen information and management using Screen Details API
useWebLocksApi - Hook for coordinating operations across tabs/workers with Web Locks API
useShare - Web Share API for native sharing
useSpeech - Speech synthesis hook for React
useFetch - Hook for fetching data from URLs with loading states, error handling, and automatic JSON parsing
useVibrate - Vibration API hook for React

</details> <details> <summary><h3>🛠️ Development & Debugging - 1 hook</h3></summary>

useRenderCount - Get the render count of a component

</details> <details open> <summary><h3>🚀 Events - 16 hooks</h3></summary>

useDocumentEventListener - A react hook to an event listener to the document object
useDocumentVisibilityState - Returns the visibilit

Rooks

Install / Use

README