Skip to content

imbhargav5/rooks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation




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