Reactで複数のrefを使いたいときの方法

ときどき複数のrefを使いたいことがあるが、コンポーネントに渡せるrefはひとつだけなのでちょっとした対応が必要。

type Ref<T extends HTMLElement> = MutableRefObject<T> | ForwardedRef<T>

/**
 * 複数のrefをマージする
 */
function mergeRefs<T extends HTMLElement>(...refs: Ref<T>[]) {
  return (node: T) => {
    for (const ref of refs) {
      if (ref === null) { continue }

      if (typeof ref === 'function') {
        ref(node)
      } else {
        ref.current = node
      }
    }
  }
}

const Component = forwardRef<HTMLElement, Props>((props, forwardedRef) => { 
  const componentRef = useRef(null)

  // 複数のrefをマージしてコンポーネントにわたす
  return <Element ref={mergeRefs(componentRef, forwardedRef)} />
})