src/lib/merge-refs.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/**
 * This TypeScript function merges multiple React refs into a single ref callback.
 * When developing low level UI components, it is common to have to use a local ref
 * but also support an external one using React.forwardRef.
 * Natively, React does not offer a way to set two refs inside the ref property. This is the goal of this small utility.
 * Today a ref can be a function or an object, tomorrow it could be another thing, who knows.
 * This utility handles compatibility for you.
 * This function is inspired by https://github.com/gregberge/react-merge-refs
 * @param refs - An array of React refs, which can be either `React.MutableRefObject<T>` or
 * `React.LegacyRef<T>`. These refs are used to store references to DOM elements or React components.
 * The `mergeRefs` function takes in an array of these refs and returns a callback function that
 * @returns The function `mergeRefs` is being returned. It takes an array of mutable or legacy refs and
 * returns a ref callback function that can be used to merge multiple refs into a single ref.
 */
export function mergeRefs<T = any>(
  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,
): React.RefCallback<T> {
  return value => {
    refs.forEach(ref => {
      if (typeof ref === 'function') {
        ref(value)
      } else if (ref != null) {
        ;(ref as React.MutableRefObject<T | null>).current = value
      }
    })
  }
}