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

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

2.1.1 (2023-09-28)

2.1.0 (2023-09-28)

Features

• allow a ref to be undefined in the types (#33) (d9079dd)

2.0.2 (2023-05-09)

Bug Fixes

• move types condition to the front (#30) (c91c4e4)

2.0.1 (2022-06-27)

Bug Fixes

• esm: add default export to maximize compat (8189083), closes #27

2.0.0 (2022-06-19)

⚠ BREAKING CHANGES

• The package now exports ESM only and a named export.

Before:

import mergeRefs from "react-merge-refs";

After:

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

Features

• ESM only & named export (a928d61)

Bug Fixes

• fix incorrect CJS / ESM distribution (#17) (048c4ea)

1.1.0 (2020-07-27)

Features

• add typescript mappings (53480d2)

1.0.0 (2019-09-19)

Features

• first version (f8d7132)