    [](#contributors)     [](https://react-hooks.org) 
Essential React custom hooks ⚓ to super charge your components!
**List of all hooks
**
**🔥 Effects
**
* [useAsyncEffect](https://react-hooks.org/docs/useAsyncEffect) - A version of useEffect that accepts an async function
* [useDidMount](https://react-hooks.org/docs/useDidMount) - componentDidMount hook for React
* [useDidUpdate](https://react-hooks.org/docs/useDidUpdate) - componentDidUpdate hook for react
* [useEffectOnceWhen](https://react-hooks.org/docs/useEffectOnceWhen) - Runs a callback effect atmost one time when a condition becomes true
* [useIntervalWhen](https://react-hooks.org/docs/useIntervalWhen) - Sets an interval immediately when a condition is true
* [useIsomorphicEffect](https://react-hooks.org/docs/useIsomorphicEffect) - A hook that resolves to useEffect on the server and useLayoutEffect on the client.
* [useLifecycleLogger](https://react-hooks.org/docs/useLifecycleLogger) - A react hook that console logs parameters as component transitions through lifecycles.
* [useWillUnmount](https://react-hooks.org/docs/useWillUnmount) - componentWillUnmount lifecycle as hook for React.
**🚀 Events
**
* [useDocumentEventListener](https://react-hooks.org/docs/useDocumentEventListener) - A react hook to an event listener to the document object
* [useFocus](https://react-hooks.org/docs/useFocus) - Handles focus events for the immediate target element.
* [useFocusWithin](https://react-hooks.org/docs/useFocusWithin) - Handles focus events for the target component.
* [useOnWindowResize](https://react-hooks.org/docs/useOnWindowResize) - A React hook for adding an event listener for window resize
* [useOnWindowScroll](https://react-hooks.org/docs/useOnWindowScroll) - A React hook for adding an event listener for window scroll
* [useOutsideClick](https://react-hooks.org/docs/useOutsideClick) - Outside click(for a ref) event as hook for React.
* [useOutsideClickRef](https://react-hooks.org/docs/useOutsideClickRef) - A hook that can track a click event outside a ref. Returns a callbackRef.
* [useWindowEventListener](https://react-hooks.org/docs/useWindowEventListener) - Adds an event listener to window
**📝 Form
**
* [useInput](https://react-hooks.org/docs/useInput) - Input hook for React.
**✨ Misc
**
* [useDebounce](https://react-hooks.org/docs/useDebounce) - Debounce hook for react
* [useDebouncedValue](https://react-hooks.org/docs/useDebouncedValue) - Tracks another value and gets updated in a debounced way.
* [useDimensionsRef](https://react-hooks.org/docs/useDimensionsRef) - Easily grab dimensions of an element with a ref using this hook
* [useEventListenerRef](https://react-hooks.org/docs/useEventListenerRef) - A react hook to add an event listener to a ref
* [useForkRef](https://react-hooks.org/docs/useForkRef) - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
* [useFreshRef](https://react-hooks.org/docs/useFreshRef) - Avoid stale state in callbacks with this hook. Auto updates values using a ref.
* [useFreshTick](https://react-hooks.org/docs/useFreshTick) - Like use-fresh-ref but specifically for functions
* [useMergeRefs](https://react-hooks.org/docs/useMergeRefs) - Merges any number of refs into a single ref
* [useRefElement](https://react-hooks.org/docs/useRefElement) - Helps bridge gap between callback ref and state
* [useRenderCount](https://react-hooks.org/docs/useRenderCount) - Get the render count of a component
* [useThrottle](https://react-hooks.org/docs/useThrottle) - Throttle custom hook for React
* [useTimeoutWhen](https://react-hooks.org/docs/useTimeoutWhen) - Takes a callback and fires it when a condition is true
* [useToggle](https://react-hooks.org/docs/useToggle) - Toggle (between booleans or custom data)hook for React.
**🚃 Navigator
**
* [useNavigatorLanguage](https://react-hooks.org/docs/useNavigatorLanguage) - Navigator Language hook for React.
* [useOnline](https://react-hooks.org/docs/useOnline) - Online status hook for React.
**❇️ State
**
* [useArrayState](https://react-hooks.org/docs/useArrayState) - Array state manager hook for React
* [useCountdown](https://react-hooks.org/docs/useCountdown) - Count down to a target timestamp and call callbacks every second (or provided peried)
* [useCounter](https://react-hooks.org/docs/useCounter) - Counter hook for React.
* [useGetIsMounted](https://react-hooks.org/docs/useGetIsMounted) - Checks if a component is mounted or not at the time. Useful for async effects
* [useLocalstorageState](https://react-hooks.org/docs/useLocalstorageState) - UseState but auto updates values to localStorage
* [useMapState](https://react-hooks.org/docs/useMapState) - A react hook to manage state in a key value pair map.
* [useMultiSelectableList](https://react-hooks.org/docs/useMultiSelectableList) - A custom hook to easily select multiple values from a list
* [usePreviousDifferent](https://react-hooks.org/docs/usePreviousDifferent) - usePreviousDifferent returns the last different value of a variable
* [usePreviousImmediate](https://react-hooks.org/docs/usePreviousImmediate) - usePreviousImmediate returns the previous value of a variable even if it was the same or different
* [useQueueState](https://react-hooks.org/docs/useQueueState) - A React hook that manages state in the form of a queue
* [useSelect](https://react-hooks.org/docs/useSelect) - Select values from a list easily. List selection hook for react.
* [useSelectableList](https://react-hooks.org/docs/useSelectableList) - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc.
* [useSessionstorageState](https://react-hooks.org/docs/useSessionstorageState) - useState but syncs with sessionstorage
* [useSetState](https://react-hooks.org/docs/useSetState) - Manage the state of a Set in React.
* [useStackState](https://react-hooks.org/docs/useStackState) - A React hook that manages state in the form of a stack
* [useUndoState](https://react-hooks.org/docs/useUndoState) - Drop in replacement for useState hook but with undo functionality.
**⚛️ UI
**
* [useBoundingclientrect](https://react-hooks.org/docs/useBoundingclientrect) - getBoundingClientRect hook for React.
* [useBoundingclientrectRef](https://react-hooks.org/docs/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](https://react-hooks.org/docs/useFullscreen) - Use full screen api for making beautiful and emersive experinces.
* [useGeolocation](https://react-hooks.org/docs/useGeolocation) - A hook to provide the geolocation info on client side.
* [useInViewRef](https://react-hooks.org/docs/useInViewRef) - Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.
* [useIntersectionObserverRef](https://react-hooks.org/docs/useIntersectionObserverRef) - A hook to register an intersection observer listener.
* [useKey](https://react-hooks.org/docs/useKey) - keypress, keyup and keydown event handlers as hooks for react.
* [useKeyBindings](https://react-hooks.org/docs/useKeyBindings) - useKeyBindings can bind multiple keys to multiple callbacks and fire the callbacks on key press.
* [useKeyRef](https://react-hooks.org/docs/useKeyRef) - Very similar useKey but it returns a ref
* [useKeys](https://react-hooks.org/docs/useKeys) - A hook which allows to setup callbacks when a combination of keys are pressed at the same time.
* [useMediaMatch](https://react-hooks.org/docs/useMediaMatch) - Signal whether or not a media query is currently matched.
* [useMouse](https://react-hooks.org/docs/useMouse) - Mouse position hook for React.
* [useMutationObserver](https://react-hooks.org/docs/useMutationObserver) - Mutation Observer hook for React.
* [useMutationObserverRef](https://react-hooks.org/docs/useMutationObserverRef) - A hook that tracks mutations of an element. It returns a callbackRef.
* [useRaf](https://react-hooks.org/docs/useRaf) - A continuously running requestAnimationFrame hook for React
* [useResizeObserverRef](https://react-hooks.org/docs/useResizeObserverRef) - Resize Observer hook for React.
* [useWindowScrollPosition](https://react-hooks.org/docs/useWindowScrollPosition) - A React hook to get the scroll position of the window
* [useWindowSize](https://react-hooks.org/docs/useWindowSize) - Window size hook for React.
## Features
✅ Collection of 66 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!
```jsx
import { useDidMount } from "rooks";
```
## Usage
```jsx
function App() {
useDidMount(() => {
alert("mounted");
});
return (
Hello CodeSandbox
Start editing to see some magic happen!
);
}
```
## Standalone Package
Package containing all the hooks is over here. - [Docs](https://github.com/imbhargav5/rooks/tree/master/packages/rooks) and [Npm Install](https://npmjs.com/package/rooks)
## License
MIT
## Contributors ✨
[](#contributors-)
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
