React Ref Factory

ReactRefFactory.tsx

import { useRef, Ref } from 'react'
import { refFactory } from './refFactory'

const ExampleButton = (props: { ref: Ref<HTMLButtonElement> }) => {
  const { ref: refFromProps } = props

  const refHook = useRef<HTMLButtonElement | null>(null)

  const refCallback = (element: HTMLButtonElement) => {
    console.log('Ref Callback', element)
  }
  
  // Works with any Refs!

  return (
    <button
      ref={refFactory<HTMLButtonElement>()
        .addRef(refFromProps)
        .addRef(refHook)
        .addRef(refCallback)}
    >
      Hello
    </button>
  )
}

export default ExampleButton

refFactory.ts

import { RefCallback, RefObject } from 'react'

type Mutable<T> = {
  -readonly [P in keyof T]: T[P]
}

type MutableRef<T> = RefCallback<T> | Mutable<RefObject<T>> | null

export interface RefFactory<T extends HTMLElement> {
  (element: T): void
  addRef: (ref: MutableRef<T>) => RefFactory<T>
}

export const refFactory = <T extends HTMLElement>(): RefFactory<T> => {
  const refs: MutableRef<T>[] = []

  let refFactory: RefFactory<T> = ((element: T) => {
    refs.forEach((ref) => {
      if (typeof ref === 'function') {
        ref(element)
      } else if (ref) {
        ref.current = element
      }
    })
  }) as RefFactory<T>

  refFactory.addRef = (ref) => {
    if (ref) {
      refs.push(ref)
    }
    return refFactory
  }

  return refFactory
}