Skip to main content

createComposeRefs

Internal hook to Frontend-UI to help with forwarding hooks to consumers, while preserving the ability to use the same ref internally in the component.

type RefType = HTMLElement | null;

const SomeRefForwardingComponent: ComponentPrimitive = React.forwardRef(
  (props, theirRef) => {
    const ourRef = React.useRef<RefType>(null);
    const composeRefs = createComposeRefs<RefType>(theirRef, ourRef);

    // Do stuff with `ourRef`...

    return <Component ref={composeRefs} />;
  }
);

Parameters​

Name

Type

Default value

Description

Param 1*React.ForwardedRef<T>–
The forwardRef ref parameter
Param 2React.MutableRefObject<T>–
The localized useRef ref

Return type​

Returns a function that accepts a parameter of type T (provided to the factory function).

Function<T>(param: T): void;