@muflihkp/use-merge-refs v1.0.3

useMergeRefs

A React hook to merge multiple refs into one.

Installation

npm install @muflihkp/use-merge-refs
# or
yarn add @muflihkp/use-merge-refs

Usage

import { useRef, forwardRef, useLayoutEffect, useState } from 'react';
import useMergeRefs from '@muflihkp/use-merge-refs';
import clsx from 'clsx';

const Button = forwardRef(function Button(props, ref) {
  const { className, variant = 'primary', ...rest } = props;
  const buttonRef = useRef(null);
  const mergedRef = useMergeRefs(ref, buttonRef);
  const [height, setHeight] = useState(0);

  useLayoutEffect(() => {
    if (buttonRef.current) {
      setHeight(buttonRef.current.clientHeight);
    }
  });

  return (
    <button
      ref={mergedRef}
      className={clsx('btn', `btn-${variant}`, className)}
      style={{ height }}
      {...rest}
    />
  );
});

License

MIT