Skip to main content

Duck Hooks

Tree-shakeable React utility hooks. Each hook lives on its own subpath: debounce, media queries, clipboard, composed refs, stable IDs.

Tree-shakeable

One hook per subpath

Each hook has its own entry point. Import the one you need. The rest never reaches your bundle.

useDebounce

Defer a value update until typing settles. Configurable delay in milliseconds.

useComposedRefs

Merge callback refs, ref objects, and forwarded refs into one. The plumbing behind `asChild` forwarding.

useCopyToClipboard

Copy any string with the async clipboard API. Tracks the last value so you can echo it in a toast.

useMediaQuery

Subscribe to `(prefers-reduced-motion)`, `(max-width: 768px)`, or any media query. SSR-safe with a configurable default.

useStableId

Generate SSR-safe, stable IDs for ARIA attributes. Built on `React.useId()` with a friendly prefix.

useComputedTimeoutTransition

Drive CSS transitions off an element’s computed transition-duration. No hardcoded timeouts.

Install

Import each hook from its subpath.

# Install
bun add @gentleduck/hooks

# Import any hook via its subpath
import { useDebounce } from '@gentleduck/hooks/use-debounce'

Free & open source

gentleduck is MIT licensed and will always be free and open source. Every package ships with full source access — fork it, modify it, own it.

Become a Sponsor