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

Current Tags

• 2.0.0                                ...           latest (a year ago)

10 Versions

• 2.0.0                                ...           a year ago
• 1.3.0                                ...           2 years ago
• 1.2.2                                ...           2 years ago
• 1.2.1                                ...           3 years ago
• 1.2.0                                ...           3 years ago
• 1.1.3                                ...           3 years ago
• 1.1.2                                ...           3 years ago
• 1.1.1                                ...           3 years ago
• 1.1.0                                ...           3 years ago
• 1.0.0                                ...           6 years ago