Skip to content

ReferenceUtils

useComposedRefs

Hook that updates multiple React refs through one stable callback ref

Import

import { useComposedRefs } from "@videojs/react";

Usage

Compose an internal ref with a forwarded ref when both need the same element.

import { forwardRef, useRef } from "react";
import { useComposedRefs } from "@videojs/react";

const Video = forwardRef<HTMLVideoElement>(function Video(_, forwardedRef) {
  const localRef = useRef<HTMLVideoElement>(null);
  const ref = useComposedRefs(forwardedRef, localRef);

  return <video ref={ref} />;
});

The callback updates callback refs and ref objects. It also preserves cleanup functions returned by React 19 callback refs.

API Reference

useComposedRefs<T>(...refs): RefCallback<T>

Parameters

ParameterTypeDefaultDetails
refs(Ref<T> | undefined)[]—

Return Value

RefCallback<T>