rooks
TypeScript icon, indicating that this package has built-in type declarations

7.14.1 • Public • Published



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

💻 🚧

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

💻

Package Sidebar

Install

npm i rooks

Weekly Downloads

91,259

Version

7.14.1

License

MIT

Unpacked Size

511 kB

Total Files

199

Last publish

Collaborators

  • imbhargav5