React Typescript merge refs util

react-typescript-merge-refs.ts

import type { LegacyRef, MutableRefObject, RefCallback } from 'react'

/**
 * @example <div ref={mergeRefs(ref, innerRef)} />
 */
export default function mergeRefs<T = any>(
  refs: Array<MutableRefObject<T> | LegacyRef<T>>,
): RefCallback<T> {
  return value => {
    refs.forEach(ref => {
      if (typeof ref === 'function') {
        ref(value)
      } else if (ref != null) {
        ;(ref as MutableRefObject<T | null>).current = value
      }
    })
  }
}


// import * as React from "react";

// export default 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;
//       }
//     });
//   };
// }