Rooks

Essential React custom hooks to super charge your components!
GitHub
3.23k
Created 6 years ago, last commit 2 years ago
78 contributors
3.06k commits
Stars added on GitHub, month by month
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
+0.1
/day
Last month
+0.6
/day
Last 12 months
+0.4
/day
npmPackage on NPM
rooks
7.14.1
Monthly downloads on NPM
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
README



CI and Semantic Release GitHub GitHub release (latest by date) GitHub contributors npm npm bundle size Codecov branch node-lts Website Module




Essential React custom hooks ⚓ to super charge your components!



List of all hooks

🔥 Effects

🚀 Events

📝 Form

✨ Misc

🚃 Navigator

❇️ State

  • 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.
  • useUndoRedoState - Setstate but can also undo and redo
  • useUndoState - Drop in replacement for useState hook but with undo functionality.

⚛️ UI

  • 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.
  • useFullscreen - Use full screen api for making beautiful and emersive experinces.
  • useGeolocation - A hook to provide the geolocation info on client side.
  • useInViewRef - Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.
  • useIntersectionObserverRef - A hook to register an intersection observer listener.
  • 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.
  • useMediaMatch - Signal whether or not a media query is currently matched.
  • useMouse - Mouse position hook for React.
  • useMutationObserver - Mutation Observer hook for React.
  • useMutationObserverRef - A hook that tracks mutations of an element. It returns a callbackRef.
  • useRaf - A continuously running requestAnimationFrame hook for React
  • useResizeObserverRef - Resize Observer hook for React.
  • useVideo - Video hook for react
  • useWindowScrollPosition - A React hook to get the scroll position of the window
  • 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!

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):

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
  2. React-aria
  3. Valtio
  4. Jotai
  5. Recoil
  6. Downshiftjs
  7. React hook form