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
Essential React custom hooks ⚓ to super charge your components!
List of all hooks
🔥 Effects
- useAsyncEffect - A version of useEffect that accepts an async function
- useDidMount - componentDidMount hook for React
- useDidUpdate - componentDidUpdate hook for react
- useEffectOnceWhen - Runs a callback effect atmost one time when a condition becomes true
- useIntervalWhen - Sets an interval immediately when a condition is 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.
🚀 Events
- useDocumentEventListener - A react hook to an event listener to the document object
- useFocus - Handles focus events for the immediate target element.
- useFocusWithin - Handles focus events for the target component.
- 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
- useInput - Input hook for React.
✨ Misc
- useDebounce - Debounce hook for react
- useDebouncedValue - Tracks another value and gets updated in a debounced way.
- useDimensionsRef - Easily grab dimensions of an element with a ref using this hook
- 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
- 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
- useRenderCount - Get the render count of a component
- useThrottle - Throttle custom hook for React
- useTimeoutWhen - Takes a callback and fires it when a condition is true
- useToggle - Toggle (between booleans or custom data)hook for React.
🚃 Navigator
- useNavigatorLanguage - Navigator Language hook for React.
- useOnline - Online status hook for React.
❇️ State
- 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
- 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
- useQueueState - A React hook that manages state in the form of a queue
- 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
- useStackState - A React hook that manages state in the form of a stack
- useUndoState - Drop in replacement for useState hook but with undo functionality.
⚛️ UI
- 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.
- useWindowScrollPosition - A React hook to get the scroll position of the window
- useWindowSize - Window size hook for React.
Features
✅ Collection of 64 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):
