Production-oriented React hooks for React 18 and 19 — strongly typed, ESM-only, SSR-safe to import, and StrictMode-safe.
npm install @muradyanvano/react-hooks| Requirement | Value |
|---|---|
| React (peer) | ^18.0.0 || ^19.0.0 |
| Module format | ESM-only |
| Node (engines) | ^20.19.0 || >=22.12.0 |
| Runtime dependency | qrcode (used by useQRCode only) |
import { useRef, useState } from 'react'
import { useOnClickOutside } from '@muradyanvano/react-hooks'
export function Menu() {
const [open, setOpen] = useState(false)
const containerRef = useRef<HTMLDivElement>(null)
useOnClickOutside(containerRef, () => {
setOpen(false)
})
return (
<div ref={containerRef}>
<button type="button" onClick={() => setOpen((value) => !value)}>
Toggle menu
</button>
{open ? <div>Menu content</div> : null}
</div>
)
}Keep the trigger inside the referenced container so the default pointerdown listener does not close the menu when opening it.
- Typed public APIs with declaration files
- SSR-safe module evaluation (no
window/documentat import time) - StrictMode-safe listener and observer cleanup
- Tree-shakable ESM build with React externalized
- Interactive Storybook docs with consumer code samples
useOnClickOutside · useOnElementRemoval · useOnKeyStroke · useEventListener · useOnLongPress · useOnStartTyping · useEventBus
useElementByPoint · useElementHover · useFocus · useFocusWithin · useTextSelection
useMouse · useMousePressed · useParallax · useScroll · useScrollLock · useInfiniteScroll · usePageLeave
useDevicesList · useDisplayMedia · useUserMedia · useEyeDropper
useLocalStorage · useSessionStorage · useCookies · useUrlSearchParams · useJwt
useWebSocket · useFullscreen · useFavicon · useNProgress · useQRCode · useBase64 · useDebounceFn
| Resource | Description |
|---|---|
| Storybook | Interactive examples and docs |
| Public API | Authoritative signatures, types, and behavior |
| Getting started | Install, peers, and first usage |
| SSR guide | Server rendering and Client Components |
| Release guide | First release and later releases |
| Changelog | Version history |
| Contributing | Local development and verification |
Additional guides: browser APIs, storage and cookies, media and permissions.
Importing the package does not touch browser globals. Subscriptions attach in effects. Call hooks from Client Components when using React Server Components. The package sets "sideEffects": false and ships a single ESM entry for tree-shaking.
MIT © Vano Muradyan