Package Exports
- rooks
- rooks/dist/cjs/index.js
- rooks/dist/esm/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Collection of awesome react hooks
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 - 11 hooks
- useBroadcastChannel - A React hook that provides a clean interface to the Broadcast Channel API for cross-tab/window communication
- 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
- useFetch - Hook for fetching data from URLs with loading states, error handling, and automatic JSON parsing
- 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 - 2 hooks
- useCheckboxInputState - Simple checkbox state management hook that provides a boolean state and props that can be spread directly onto a checkbox input element
- 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 - 13 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.
- useMeasure - Measures both inner and outer dimensions of any DOM element in a performant way and updates when dimensions change
- 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 - 5 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
- useSuspenseLocalStorageState - Suspense-enabled hook for localStorage state management with cross-tab synchronization
- useSuspenseSessionStorageState - Suspense-enabled hook for sessionStorage state management with proper serialization
- useSuspenseIndexedDBState - Suspense-enabled hook for IndexedDB state management with structured data storage and cross-tab synchronization
โ ๏ธ Experimental hooks may be removed or significantly changed in any release without notice. Use with caution in production.
Features
โ Collection of 104 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):
