src/useMergedRefs.ts

base-ui · packages/utils/src/useMergedRefs.ts · typescript · MIT
ui

Merges multiple refs into a single callback ref for React components.

// Source: https://github.com/mui/base-ui | License: MIT | Copyright 2019 Material-UI SAS
// Provided via justclaw.it.com; keep this notice with the code.
import type * as React from 'react';
import { useRefWithInit } from './useRefWithInit';

type Empty = null | undefined;
type InputRef<I> = React.Ref<I> | Empty;
type Result<I> = React.RefCallback<I> | null;
type Cleanup = () => void;

type ForkRef<I> = {
  callback: React.RefCallback<I> | null;
  cleanup: Cleanup | null;
  refs: InputRef<I>[];
};

/**
 * Merges refs into a single memoized callback ref or `null`.
 * This makes sure multiple refs are updated together and have the same value.
 *
 * This function accepts up to four refs. If you need to merge more, or have an unspecified number of refs to merge,
 * use `useMergedRefsN` instea

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key