Package Exports
- rooks
- rooks/experimental
- rooks/package.json
Readme
Essential React custom hooks โ to super charge your components!
List of all hooks
๐ฌ Animation & Timing - 5 hooks
- useIntervalWhen - Sets an interval immediately when a condition is true
- useLockBodyScroll - This hook locks the scroll of the body element when
isLockedis set totrue. - useRaf - A continuously running requestAnimationFrame hook for React
- useResizeObserverRef - Resize Observer hook for React.
- useTimeoutWhen - Takes a callback and fires it when a condition is true
๐ Browser APIs - 9 hooks
- useGeolocation - A hook to provide the geolocation info on client side.
- useIdleDetectionApi - Hook to detect when user is idle using Idle Detection API with polyfill
- useNavigatorLanguage - Navigator Language hook for React.
- useOnline - Online status hook for React.
- useOrientation - orientation hook for react
- useScreenDetailsApi - Hook for multi-screen information and management using Screen Details API
- useWebLocksApi - Hook for coordinating operations across tabs/workers with Web Locks API
- useSpeech - Speech synthesis hook for React
- useVibrate - Vibration API hook for React
๐ ๏ธ Development & Debugging - 1 hook
- useRenderCount - Get the render count of a component
๐ Events - 15 hooks
- useDocumentEventListener - A react hook to an event listener to the document object
- useDocumentVisibilityState - Returns the visibility state of the document.
- useFocus - Handles focus events for the immediate target element.
- useFocusWithin - Handles focus events for the target component.
- useIsDroppingFiles - Check if any files are currently being dropped anywhere. Useful for highlighting drop areas.
- useOnClickRef - Callback on click/tap events
- useOnHoverRef - On hover callback hook
- useOnLongHover - Fires a callback when an element is hovered for a while
- useOnLongPress - Fire a callback on long press
- useOnStartTyping - Fires a callback when the user starts typing outside editable fields (input, textarea, contenteditable). Supports filtering for a-z and 0-9 keys.
- useOnWindowResize - A React hook for adding an event listener for window resize
- useOnWindowScroll - A React hook for adding an event listener for window scroll
- useOutsideClick - Outside click(for a ref) event as hook for React.
- useOutsideClickRef - A hook that can track a click event outside a ref. Returns a callbackRef.
- useWindowEventListener - Adds an event listener to window
๐ Form & File Handling - 1 hook
- useFileDropRef - Drop files easily
โจ๏ธ Keyboard & Input - 5 hooks
- useInput - Input hook for React.
- 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.
๐ฅ Lifecycle & Effects - 9 hooks
- useAsyncEffect - A version of useEffect that accepts an async function
- useDeepCompareEffect - Deep compare dependencies instead of shallow for useEffect
- useDidMount - componentDidMount hook for React
- useDidUpdate - componentDidUpdate hook for react
- useDocumentTitle - A hook to easily update document title with React
- useEffectOnceWhen - Runs a callback effect atmost one time when a condition becomes true
- useIsomorphicEffect - A hook that resolves to useEffect on the server and useLayoutEffect on the client.
- useLifecycleLogger - A react hook that console logs parameters as component transitions through lifecycles.
- useWillUnmount - componentWillUnmount lifecycle as hook for React.
๐ฑ๏ธ Mouse & Touch - 3 hooks
- useMouse - Mouse position hook for React.
- useMouseMoveDelta - Tracks delta of mouse move
- useMouseWheelDelta - Tracks delta of mouse move
โก Performance & Optimization - 4 hooks
- useDebounce - Debounce hook for react
- useDebouncedValue - Tracks another value and gets updated in a debounced way.
- useDebounceFn - Powerful debounce function hook for React
- useThrottle - Throttle custom hook for React
โ๏ธ State - 18 hooks
- 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
๐ State History & Time Travel - 4 hooks
- useTimeTravelState - A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.
- useToggle - Toggle (between booleans or custom data)hook for React.
- useUndoRedoState - Setstate but can also undo and redo
- useUndoState - Drop in replacement for useState hook but with undo functionality.
โ๏ธ UI - 12 hooks
- 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.
- useDimensionsRef - Easily grab dimensions of an element with a ref using this hook
- useFullscreen - Use full screen api for making beautiful and emersive experinces.
- useIntersectionObserverRef - A hook to register an intersection observer listener.
- useInViewRef - Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.
- useMediaMatch - Signal whether or not a media query is currently matched.
- useMutationObserver - Mutation Observer hook for React.
- useMutationObserverRef - A hook that tracks mutations of an element. It returns a callbackRef.
- usePictureInPictureApi - Hook for managing Picture-in-Picture video functionality
- useVideo - Video hook for react
๐ง Utilities & Refs - 7 hooks
- useEventListenerRef - A react hook to add an event listener to a ref
- useForkRef - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
- useFreshCallback - Avoid stale closures and keep your callback fresh
- useFreshRef - Avoid stale state in callbacks with this hook. Auto updates values using a ref.
- useFreshTick - Like use-fresh-ref but specifically for functions
- useMergeRefs - Merges any number of refs into a single ref
- useRefElement - Helps bridge gap between callback ref and state
๐ฑ Window & Viewport - 2 hooks
- useWindowScrollPosition - A React hook to get the scroll position of the window
- useWindowSize - Window size hook for React.
๐งช Experimental Hooks - 2 hooks
- useSuspenseNavigatorBattery - Suspense-enabled hook for getting battery status information from Navigator Battery API
- useSuspenseNavigatorUserAgentData - Suspense-enabled hook for getting high entropy values from Navigator User Agent Data API
โ ๏ธ Experimental hooks may be removed or significantly changed in any release without notice. Use with caution in production.
Features
โ Collection of 97 hooks as standalone modules.
โ Standalone package with all the hooks at one place
โ CommonJS, UMD and ESM Support
Installation
npm i -s rooksImport 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):
