A collection of well-typed, tree-shakable React hooks for everyday use — built for React 18 and 19.
npm install @ronekit/hooks
# or
yarn add @ronekit/hooks
# or
pnpm add @ronekit/hooksPeer dependencies: react ^18.0.0 || ^19.0.0 and react-dom ^18.0.0 || ^19.0.0
import { useDisclosure, useClipboard } from '@ronekit/hooks';
function Demo() {
const [opened, { open, close }] = useDisclosure(false);
const { copy, copied } = useClipboard({ timeout: 2000 });
return (
<>
<button onClick={open}>Open modal</button>
<button onClick={() => copy('Hello!')}>
{copied ? 'Copied!' : 'Copy text'}
</button>
{opened && <dialog open onClose={close}>…</dialog>}
</>
);
}| Hook | Description |
|---|---|
| useBrowserStorage | Persists and syncs a value in localStorage or sessionStorage with JSON serialization. |
| useDisclosure | Manages open/closed state with open, close, and toggle handlers. |
| useMounted | Returns true once the component has mounted on the client. |
| usePrevious | Stores and returns the previous render's value of a state or prop. |
| useToggle | Cycles between a set of values on each call; defaults to toggling between true and false. |
| useUncontrolled | Manages a value that can operate as either controlled or uncontrolled, bridging both patterns. |
| Hook | Description |
|---|---|
| useClickOutside | Triggers a callback when a click or touch event occurs outside the referenced element. |
| useEventListener | Attaches a typed event listener to a DOM element via a ref callback. |
| useFullscreen | Enters and exits fullscreen mode for a target element or the document. |
| useHover | Tracks whether an element is currently hovered via a ref callback. |
| useMergedRef | Merges multiple React refs (callback refs or ref objects) into a single ref callback. |
| useResizeObserver | Observes an element's border-box size changes via the ResizeObserver API. |
| useWindowEvent | Attaches a typed event listener to the window object. |
| Hook | Description |
|---|---|
| useClipboard | Copies a value to the clipboard with a timed reset of the copied state. |
| useDocumentTitle | Synchronizes the browser tab title with the provided string. |
| useDocumentVisibility | Returns the current document visibility state and updates when it changes. |
| useFavicon | Dynamically sets the page favicon to the provided URL. |
| useFileDialog | Opens a native file picker dialog and returns the selected files. |
| Hook | Description |
|---|---|
| useDebouncedCallback | Returns a debounced version of the provided callback that delays invoking it until after the wait. |
| useIsFirstRender | Returns true only during the component's first render. |
| useIsomorphicEffect | Runs useLayoutEffect in the browser and useEffect on the server, preventing SSR warnings. |
| Hook | Description |
|---|---|
| useIdle | Detects user inactivity after the specified timeout in milliseconds. |
| useMouse | Tracks the mouse cursor position relative to a target element or the viewport. |
| useOrientation | Returns the current screen orientation angle and type, updating on orientation change. |
| useViewportSize | Returns the current viewport width and height, updating on resize and orientation change. |
See CONTRIBUTING.md for setup instructions, commit conventions, and the guide for adding a new hook.
MIT © Sivakarthikeyan
