useMergedRefs

Combine a forwarded ref with your own refs.

HooksState@gaudi/design-system/hooks/state/use-merged-refsView in Storybook Source

One stable callback ref that forwards the node to every ref passed, object or callback, including React 19 ref cleanups.

Usage

import { useMergedRefs } from '@gaudi/design-system/hooks';
function SearchField({ ref, ...props }) {  const inputRef = useRef(null);  return <Input ref={useMergedRefs(ref, inputRef)} {...props} />;}

Examples

Forward a ref and keep your own

Storybook

API

1 option

1 return value

Accessibility

Lets a component keep its own ref for focus management while still forwarding the host ref.

Notes

mergeRefs(...refs) is exported for use outside components.

useBooleanGeneric boolean state with stable toggle, enable and disable actions.useControllableStateState that works controlled or uncontrolled, like native inputs.useCountdownA pausable countdown or count-up that stops at its target.useCounterA number with increment, decrement, set and reset actions.useDebounceCallbackA debounced function with cancel and flush.useDebounceValueA value that updates only after it stops changing.