useMergedRefs
Combine object and callback refs into one ref for a shared DOM node.
Signature
Use it for a forwardRef component that also needs the node itself. It accepts object refs, callback refs, and undefined, and returns one callback ref to spread.
function useMergedRefs<T>(
...refs: (Ref<T> | undefined)[]
): (node: T | null) => void;Usage
import { forwardRef, useEffect, useRef } from "react";
import type { InputHTMLAttributes } from "react";
import { useMergedRefs } from "@solarius/onset";
const AutoFocusInput = forwardRef<
HTMLInputElement,
InputHTMLAttributes<HTMLInputElement>
>((props, ref) => {
const innerRef = useRef<HTMLInputElement>(null);
const mergedRef = useMergedRefs(innerRef, ref);
useEffect(() => {
innerRef.current?.focus();
}, []);
return <input ref={mergedRef} {...props} />;
});