react-merge-refs

What is react-merge-refs?

The react-merge-refs package allows you to merge multiple React refs into a single ref. This is particularly useful when you need to pass multiple refs to a single DOM element or component.

What are react-merge-refs's main functionalities?

Merging Multiple Refs

This feature allows you to merge multiple refs into a single ref. In this example, ref1 and ref2 are merged into mergedRef, which is then passed to the div element.

const { useRef } = require('react');
const mergeRefs = require('react-merge-refs');

function MyComponent() {
  const ref1 = useRef();
  const ref2 = useRef();
  const mergedRef = mergeRefs([ref1, ref2]);

  return <div ref={mergedRef}>Hello World</div>;
}

0

README

react-merge-refs

React utility to merge refs 🖇

npm install react-merge-refs

Example

import React from "react";
import { mergeRefs } from "react-merge-refs";

const Example = React.forwardRef(function Example(props, ref) {
  const localRef = React.useRef();
  return <div ref={mergeRefs([localRef, ref])} />;
});

Why?

When developing low level UI components, it is common to have to use a local ref but also support an external one using React.forwardRef. Natively, React does not offer a way to set two refs inside the ref property. This is the goal of this small utility.

Today a ref can be a function or an object, tomorrow it could be another thing, who knows. This utility handles compatibility for you.

License

MIT

Changelog

3.0.2 (2025-05-08)

Bug Fixes

• make react peer dependency optional (7cef157)