useMergeRefs

A custom hook that can be utilized to merge multiple refs given as arguments into one.

Interface

const useMergeRefs: <T = any>(
  ...refs: (React.MutableRefObject<T> | React.LegacyRef<T>)[]
) => (instance: T | null) => void;

Usage

import React, { forwardRef, useRef } from 'react';
import { useMergeRefs } from '@devgrace/react';

interface Props {
  /* ... */
}

const Example = forwardRef<HTMLDivElement, Props>((props, ref) => {
  const childRef = useRef<HTMLDivElement | null>(null);

  return <div ref={useMergeRefs(childRef, ref)}>{/* ... */}</div>;
});