📚 Table of Contents

• Quick Start
• Why Rooks?
• Popular Hooks
• All Hooks by Category
• Features
• Installation
• Usage
• Contributors
• License

🚀 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

✨ Why Rooks?

🌟 Popular Hooks

State Management

Event Handling

Lifecycle & Effects

List of all hooks

• 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

• 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

• useRenderCount - Get the render count of a component

• useDocumentEventListener - A react hook to an event listener to the document object
• useDocumentVisibilityState - Returns the visibility state of the document.
• useFocus - Handles focus events for the immediate target element.
• useFocusWithin - Handles focus events for the target component.
• useIsDroppingFiles - Check if any files are currently being dropped anywhere. Useful for highlighting drop areas.
• useOnClickRef - Callback on click/tap events
• useOnHoverRef - On hover callback hook
• useOnLongHover - Fires a callback when an element is hovered for a while
• useOnLongPress - Fire a callback on long press
• useOnStartTyping - Fires a callback when the user starts typing outside editable fields (input, textarea, contenteditable). Supports filtering for a-z and 0-9 keys.
• useOnWindowResize - A React hook for adding an event listener for window resize
• useOnWindowScroll - A React hook for adding an event listener for window scroll
• useOutsideClick - Outside click(for a ref) event as hook for React.
• useOutsideClickRef - A hook that can track a click event outside a ref. Returns a callbackRef.
• usePageLeave - Page leave detection with callbacks for beforeunload and visibility change
• useWindowEventListener - Adds an event listener to window

• useCheckboxInputState - Simple checkbox state management hook that provides a boolean state and props that can be spread directly onto a checkbox input element
• useFileDropRef - Drop files easily
• useFormState - Comprehensive form state management with validation

• useInput - Input hook for React.
• useKey - keypress, keyup and keydown event handlers as hooks for react.
• useKeyBindings - useKeyBindings can bind multiple keys to multiple callbacks and fire the callbacks on key press.
• useKeyRef - Very similar useKey but it returns a ref
• useKeys - A hook which allows to setup callbacks when a combination of keys are pressed at the same time.

• useAsyncEffect - A version of useEffect that accepts an async function
• useDebouncedAsyncEffect - A version of useEffect that accepts an async function and debounces its execution based on dependency changes
• useDebouncedEffect - A version of useEffect that debounces the effect execution based on dependency changes
• useDeepCompareEffect - Deep compare dependencies instead of shallow for useEffect
• useDidMount - componentDidMount hook for React
• useDidUpdate - componentDidUpdate hook for react
• useDocumentTitle - A hook to easily update document title with React
• useEffectOnceWhen - Runs a callback effect atmost one time when a condition becomes true
• useIsomorphicEffect - A hook that resolves to useEffect on the server and useLayoutEffect on the client.
• useLifecycleLogger - A react hook that console logs parameters as component transitions through lifecycles.
• useWillUnmount - componentWillUnmount lifecycle as hook for React.

• useMouse - Mouse position hook for React.
• useMouseMoveDelta - Tracks delta of mouse move
• useMouseWheelDelta - Tracks delta of mouse move

• useDebounce - Debounce hook for react
• useDebouncedValue - Tracks another value and gets updated in a debounced way.
• useDebounceFn - Powerful debounce function hook for React
• useThrottle - Throttle custom hook for React
• useWebWorker - Web Worker management with message passing

• useArrayState - Array state manager hook for React
• useCountdown - Count down to a target timestamp and call callbacks every second (or provided peried)
• useCounter - Counter hook for React.
• useGetIsMounted - Checks if a component is mounted or not at the time. Useful for async effects
• useLocalstorageState - UseState but auto updates values to localStorage
• useMapState - A react hook to manage state in a key value pair map.
• useMultiSelectableList - A custom hook to easily select multiple values from a list
• useNativeMapState - Manage Map() object state in React
• usePreviousDifferent - usePreviousDifferent returns the last different value of a variable
• usePreviousImmediate - usePreviousImmediate returns the previous value of a variable even if it was the same or different
• usePromise - Promise management hook for react
• useQueueState - A React hook that manages state in the form of a queue
• useSafeSetState - set state but ignores if component has already unmounted
• useSelect - Select values from a list easily. List selection hook for react.
• useSelectableList - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc.
• useSessionstorageState - useState but syncs with sessionstorage
• useSetState - Manage the state of a Set in React.
• useStackState - A React hook that manages state in the form of a stack

• useTimeTravelState - A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.
• useToggle - Toggle (between booleans or custom data)hook for React.
• useUndoRedoState - Setstate but can also undo and redo
• useUndoState - Drop in replacement for useState hook but with undo functionality.

• useAudio - Audio hook
• useBoundingclientrect - getBoundingClientRect hook for React.
• useBoundingclientrectRef - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked.
• useDimensionsRef - Easily grab dimensions of an element with a ref using this hook
• useFullscreen - Use full screen api for making beautiful and emersive experinces.
• useMeasure - Measures both inner and outer dimensions of any DOM element in a performant way and updates when dimensions change
• useIntersectionObserverRef - A hook to register an intersection observer listener.
• useInViewRef - Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.
• useMediaMatch - Signal whether or not a media query is currently matched.
• useMutationObserver - Mutation Observer hook for React.
• useMutationObserverRef - A hook that tracks mutations of an element. It returns a callbackRef.
• usePictureInPictureApi - Hook for managing Picture-in-Picture video functionality
• usePreferredColorScheme - Color scheme preference detection (dark/light mode)
• useVideo - Video hook for react

• useEventListenerRef - A react hook to add an event listener to a ref
• useForkRef - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
• useFreshCallback - Avoid stale closures and keep your callback fresh
• useFreshRef - Avoid stale state in callbacks with this hook. Auto updates values using a ref.
• useFreshTick - Like use-fresh-ref but specifically for functions
• useMergeRefs - Merges any number of refs into a single ref
• useRefElement - Helps bridge gap between callback ref and state

• useWindowScrollPosition - A React hook to get the scroll position of the window
• useWindowSize - Window size hook for React.

• useSuspenseNavigatorBattery - Suspense-enabled hook for getting battery status information from Navigator Battery API
• useSuspenseNavigatorUserAgentData - Suspense-enabled hook for getting high entropy values from Navigator User Agent Data API
• useSuspenseLocalStorageState - Suspense-enabled hook for localStorage state management with cross-tab synchronization
• useSuspenseSessionStorageState - Suspense-enabled hook for sessionStorage state management with proper serialization
• useSuspenseIndexedDBState - Suspense-enabled hook for IndexedDB state management with structured data storage and cross-tab synchronization

Features

✅ Collection of 120 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!

import { useDidMount } from "rooks";

Usage

function App() {
  useDidMount(() => {
    alert("mounted");
  });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Standalone Package

Package containing all the hooks is over here. - Docs and Npm Install

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):