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 ✨
Thanks goes to these wonderful people (emoji key):
Other hooks libraries
These are some libraries that I constantly take inspiration and ideas from
- React-use
- React-aria
- Valtio
- Jotai
- Recoil
- Downshiftjs
- React hook form