merge-refs

What is merge-refs?

The merge-refs npm package is a utility for combining multiple React refs into a single ref. This is particularly useful when you need to pass multiple refs to a single component or element.

What are merge-refs's main functionalities?

Combining Multiple Refs

This feature allows you to combine multiple refs into a single ref. In this example, `ref1` and `ref2` are combined and passed to a `div` element.

import React, { useRef } from 'react';
import mergeRefs from 'merge-refs';

const MyComponent = () => {
  const ref1 = useRef();
  const ref2 = useRef();

  return <div ref={mergeRefs([ref1, ref2])}>Hello World</div>;
};

Other packages similar to merge-refs

react-merge-refs

The react-merge-refs package provides similar functionality by allowing you to merge multiple refs into one. It is very similar to merge-refs in terms of usage and purpose.

README

Merge-Refs

A function that merges React refs into one. Filters out invalid (eg. falsy) refs as well and returns original ref if only one valid ref was given.

tl;dr

• Install by executing npm install merge-refs or yarn add merge-refs.
• Import by adding import mergeRefs from 'merge-refs'.
• Use it in ref like so: <div ref={mergeRefs(ref, someOtherRef)} />

Accepted refs

• Refs created using createRef()
• Refs created using useRef()
• Functional refs

Example

function Hello() {
  const ref1 = useRef<HTMLDivElement>(); // I'm going to be updated!
  const ref2 = (element: HTMLDivElement) => {
    // I'm going to be called!
  };

  return <div ref={mergeRefs(ref1, ref2)} />;
}

License

The MIT License.

Author

Wojciech Maj