merge-refs
TypeScript icon, indicating that this package has built-in type declarations

1.3.0 • Public • Published

npm downloads CI

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 Wojciech Maj

Package Sidebar

Install

npm i merge-refs

Weekly Downloads

883,850

Version

1.3.0

License

MIT

Unpacked Size

10.3 kB

Total Files

10

Last publish

Collaborators

  • wojtekmaj