npm.io
9.8.0 • Published 4 months ago

rooks

Licence
MIT
Version
9.8.0
Deps
4
Size
422 kB
Vulns
0
Weekly
0
Stars
3.4K



Why Rooks ?


CI and Semantic Release GitHub release (latest by date) GitHub Codecov branch


npm npm bundle size Module node-lts


GitHub contributors Website GitHub stars




Collection of awesome react hooks



Table of Contents


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?

Focused
Each hook does one thing well
Tree-shakeable
Import only what you need
SSR Ready
Works with Next.js, Remix, Gatsby
Well Tested
95%+ code coverage
Documented
Every hook has examples & demos
TypeScript First
Full type safety out of the box
Modern
Built for React 18+ with ESM
Community Driven
82 contributors and growing

State Management
useCounter
Counter with increment/decrement
useToggle
Toggle between values
useLocalstorageState
useState with localStorage sync
const { value, increment }
= useCounter(0)
const [on, toggle]
= useToggle()
const [user, setUser]
= useLocalstorageState('user')
Event Handling
useKey
Keyboard event handling
useOutsideClick
Detect clicks outside element
useOnClickRef
Click handler with ref
Lifecycle & Effects
useDidMount
componentDidMount equivalent
useWillUnmount
componentWillUnmount equivalent
useDebounce
Debounce any value

List of all hooks

Animation & Timing - 10 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

Browser APIs - 16 hooks

Development & Debugging - 1 hook

Events - 16 hooks

Form & File Handling - 3 hooks

  • 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

Keyboard & Input - 5 hooks

  • 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.

Lifecycle & Effects - 11 hooks

  • 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.

Mouse & Touch - 3 hooks

Performance & Optimization - 5 hooks

State - 22 hooks

  • 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
  • useTemporalAge - Returns the calendar age from a birth date, updating at each day boundary
  • useTemporalCountdown - Returns the remaining duration until a target instant with aligned updates
  • useTemporalElapsed - Returns the elapsed duration since a start instant with aligned updates
  • useTemporalNow - Returns the current time as a Temporal value with aligned updates

State History & Time Travel - 4 hooks

  • 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.

UI - 14 hooks

Utilities & Refs - 7 hooks

  • 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

Window & Viewport - 2 hooks

Experimental Hooks - 6 hooks

Experimental hooks may be removed or significantly changed in any release without notice. Use with caution in production.



Features

Collection of 125 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

All Contributors

Thanks goes to these wonderful people (emoji key):

View all 63 contributors

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


Keywords