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

Parameters

Parameter	Type	Default	Details
`refs`	`unknown`	`—`
Description Refs to update from the returned callback.

Return Value

RefCallback<T>