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

Current Tags

• 2.1.1                                ...           latest (a year ago)

7 Versions

• 2.1.1                                ...           a year ago
• 2.1.0                                ...           a year ago
• 2.0.2                                ...           2 years ago
• 2.0.1                                ...           2 years ago
• 2.0.0                                ...           2 years ago
• 1.1.0                                ...           4 years ago
• 1.0.0                                ...           5 years ago