A utility that composes multiple React refs (callback refs and RefObjects) into a single callback ref. Useful when you need to assign a DOM node to more than one ref at the same time.
For the React hook version that wraps this in useCallback for stability, see useComposedRefs in @ngrok/mantle/hooks.
1import { composeRefs } from "@ngrok/mantle/utils";forwardRefThe most common use case: forward a ref to a parent while keeping an internal ref for the component itself.
1import { forwardRef, useRef } from "react";2import { composeRefs } from "@ngrok/mantle/utils";3 4const MyInput = forwardRef<HTMLInputElement>((props, forwardedRef) => {5 const internalRef = useRef<HTMLInputElement>(null);6 7 return <input ref={composeRefs(internalRef, forwardedRef)} {...props} />;8});1import { useRef } from "react";2import { composeRefs } from "@ngrok/mantle/utils";3 4function Example() {5 const focusRef = useRef<HTMLButtonElement>(null);6 const measureRef = useRef<HTMLButtonElement>(null);7 8 return <button ref={composeRefs(focusRef, measureRef)}>Click me</button>;9}composeRefs accepts any mix of RefObjects and callback refs:
1import { useRef } from "react";2import { composeRefs } from "@ngrok/mantle/utils";3 4function Example() {5 const objectRef = useRef<HTMLDivElement>(null);6 const callbackRef = (node: HTMLDivElement | null) => {7 if (node) {8 console.log("mounted", node);9 }10 };11 12 return <div ref={composeRefs(objectRef, callbackRef)} />;13}1function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;2 3type PossibleRef<T> = React.Ref<T> | undefined;Accepts any number of refs (callback refs, RefObjects, or undefined). Returns a single callback ref that, when called with a node, assigns the node to all provided refs. undefined refs are safely skipped.