Reactでrefをマージする

1
import { useMemo } from "react";
2

3
export type ReactRef<T> = React.RefCallback<T> | React.MutableRefObject<T>;
4

5
export function assignRef<T = unknown>(
6
  ref: ReactRef<T> | null | undefined,
7
  value: T
8
) {
9
  if (ref === null || ref === undefined) return;
10

11
  if (typeof ref === "function") {
12
    ref(value);
13
    return;
14
  }
15

16
  try {
17
    ref.current = value;
18
  } catch (error) {
19
    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
20
  }
21
}
22

23
export function mergeRefs<T>(...refs: (ReactRef<T> | null | undefined)[]) {
24
  return (node: T | null) => {
25
    refs.forEach((ref) => {
26
      assignRef(ref, node);
27
    });
28
  };
29
}
30

31
export function useMergeRefs<T>(...refs: (ReactRef<T> | null | undefined)[]) {
32
  return useMemo(() => mergeRefs(...refs), refs);
33
}