Ship faster with batteries included
Debouncing, observers, storage bridges, and browser helpers - ready to drop into production components.
Collection of React Hooks
Typed, tree-shakable utilities with copy-paste examples, SSR callouts, and tests behind every export.
These are real in-page previews: each card links to the hook’s full reference. More categories will land here next.
Toggles, counters, debounce, storage, ref history, and related helpers - click a card to open its live preview. Browse State in the function list →
Boolean (or set) state with a flip/toggle, optional custom setters, and a stable toggler function.
Loading demo...
Increment, decrement, or set a number with optional min/max so values stay in range.
Loading demo...
Debounce a value: the output updates only after the input has settled for a chosen delay.
Loading demo...
Read the value from the previous render - handy for diffs, animations, and simple undo of values.
Loading demo...
A ref that always points at the latest value, so callbacks and effects can read fresh data without re-subscribing.
Loading demo...
Throttle a value so it can change at most once per interval while the input keeps moving.
Loading demo...
Async loadable state: loading / ready / error, optional data, and cancel for stale work.
Loading demo...
Sync React state with `localStorage` (or any `Storage`) with JSON and optional `remove`.
Loading demo...
Async storage: load with `getItem` after mount, then persist with a loading flag and serializers.
Loading demo...
Record when a value last changed, expose a time difference, and reset the timer when needed.
Loading demo...
Every change becomes a history snapshot: undo, redo, clear, and cap length with capacity.
Loading demo...
Ref-based history, but you commit snapshots explicitly for frequent or batched updates.
Loading demo...
Ref history: record a new snapshot only after the value has been still for a debounce period.
Loading demo...
Ref history: record at most one snapshot per throttle window while the value changes fast.
Loading demo...
Event handler with a stable identity that always calls the latest implementation.
Loading demo...
Run a function once on mount, optionally with a returned cleanup on unmount.
Loading demo...
DOM-focused helpers: textarea autosize, outside click handling, drag/drop, element measurement, focus and scroll state. Browse Elements in the function list →
Autosize a textarea to content height; optionally sync the measured height to a wrapper via styleTarget.
Loading demo...
Close a panel when clicks happen outside multiple protected refs (toggle button + content area).
Loading demo...
Drag a card by its handle and keep it inside a container while tracking position and drag state.
Loading demo...
Observe a panel size with ResizeObserver while changing width, height, and inner padding live.
Loading demo...
Track full DOMRect values (x/y/edges/size) while a target moves inside a scrollable container.
Loading demo...
Observe when a sentinel becomes visible inside a scroll root with configurable threshold.
Loading demo...
Resolve and inspect a target node parentElement, and interact with the parent wrapper through the returned node.
Loading demo...
Reflect current window focus/blur state and demonstrate focus-aware background ticking.
Loading demo...
Track live window scrollX/scrollY and expose quick actions for top/middle/end navigation.
Loading demo...
Mirror document.activeElement and inspect focus transitions across inputs, textarea, buttons, and links.
Loading demo...
Track drag-over state and capture dropped files with hover feedback and recent-drop logging.
Loading demo...
Add the package, skim the guide, and pull in only the hooks you need - same APIs you saw in the live demos above.
Works with any React 17+ app. Tree-shaking friendly.
npm i @dedalik/use-reactIssues, roadmap, and source for every hook - stars help others find the project.
Star dedalik/use-reactEvery export with sizes, SSR notes, and runnable snippets.
Browse all functionsGet started guide →