Skip to content

useReact

Collection of React Hooks

Typed, tree-shakable utilities with copy-paste examples, SSR callouts, and tests behind every export.

React
188hooks
Tree-shakableimports

Live component examples

These are real in-page previews: each card links to the hook’s full reference. More categories will land here next.

State

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...

Demo sourceJSX
JSX

Increment, decrement, or set a number with optional min/max so values stay in range.

Loading demo...

Demo sourceJSX
JSX

Debounce a value: the output updates only after the input has settled for a chosen delay.

Loading demo...

Demo sourceJSX
JSX

Read the value from the previous render - handy for diffs, animations, and simple undo of values.

Loading demo...

Demo sourceJSX
JSX

A ref that always points at the latest value, so callbacks and effects can read fresh data without re-subscribing.

Loading demo...

Demo sourceJSX
JSX

Throttle a value so it can change at most once per interval while the input keeps moving.

Loading demo...

Demo sourceJSX
JSX

Async loadable state: loading / ready / error, optional data, and cancel for stale work.

Loading demo...

Demo sourceJSX
JSX

Sync React state with `localStorage` (or any `Storage`) with JSON and optional `remove`.

Loading demo...

Demo sourceJSX
JSX

Async storage: load with `getItem` after mount, then persist with a loading flag and serializers.

Loading demo...

Demo sourceJSX
JSX

Record when a value last changed, expose a time difference, and reset the timer when needed.

Loading demo...

Demo sourceJSX
JSX

Every change becomes a history snapshot: undo, redo, clear, and cap length with capacity.

Loading demo...

Demo sourceJSX
JSX

Ref-based history, but you commit snapshots explicitly for frequent or batched updates.

Loading demo...

Demo sourceJSX
JSX

Ref history: record a new snapshot only after the value has been still for a debounce period.

Loading demo...

Demo sourceJSX
JSX

Ref history: record at most one snapshot per throttle window while the value changes fast.

Loading demo...

Demo sourceJSX
JSX

Event handler with a stable identity that always calls the latest implementation.

Loading demo...

Demo sourceJSX
JSX

Run a function once on mount, optionally with a returned cleanup on unmount.

Loading demo...

Demo sourceJSX
JSX

Elements

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...

Demo sourceJSX
JSX

Close a panel when clicks happen outside multiple protected refs (toggle button + content area).

Loading demo...

Demo sourceJSX
JSX

Drag a card by its handle and keep it inside a container while tracking position and drag state.

Loading demo...

Demo sourceJSX
JSX

Observe a panel size with ResizeObserver while changing width, height, and inner padding live.

Loading demo...

Demo sourceJSX
JSX

Track full DOMRect values (x/y/edges/size) while a target moves inside a scrollable container.

Loading demo...

Demo sourceJSX
JSX

Observe when a sentinel becomes visible inside a scroll root with configurable threshold.

Loading demo...

Demo sourceJSX
JSX

Resolve and inspect a target node parentElement, and interact with the parent wrapper through the returned node.

Loading demo...

Demo sourceJSX
JSX

Reflect current window focus/blur state and demonstrate focus-aware background ticking.

Loading demo...

Demo sourceJSX
JSX

Track live window scrollX/scrollY and expose quick actions for top/middle/end navigation.

Loading demo...

Demo sourceJSX
JSX

Mirror document.activeElement and inspect focus transitions across inputs, textarea, buttons, and links.

Loading demo...

Demo sourceJSX
JSX

Track drag-over state and capture dropped files with hover feedback and recent-drop logging.

Loading demo...

Demo sourceJSX
JSX

Ready when you are

Add the package, skim the guide, and pull in only the hooks you need - same APIs you saw in the live demos above.

Community

Star on GitHub

Issues, roadmap, and source for every hook - stars help others find the project.

Star dedalik/use-react

Released under the MIT License.