Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 40 Commits
.github		.github
src		src
.gitignore		.gitignore
.npmignore		.npmignore
.prettierignore		.prettierignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tsup.config.ts		tsup.config.ts

Repository files navigation

react-merge-refs

React utility to merge refs 🖇

npm install react-merge-refs

Example

importReactfrom"react";import{mergeRefs}from"react-merge-refs";constExample=React.forwardRef(functionExample(props,ref){constlocalRef=React.useRef();return<divref={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 usingReact.forwardRef. Natively, React does not offer a way to set two refs inside theref property. This is the goal of this small utility.

Today aref can be afunction or anobject, tomorrow it could be another thing, who knows. This utility handles compatibility for you.