Rooks

useMergeRefs

About

Merges any number of refs into a single ref

Examples

import "./styles.css";
import { useMergeRefs, useEventListenerRef } from "rooks";
 
function App() {
  const mousedownRef = useEventListenerRef("mousedown", () => {
    console.log("mouse down");
  });
  const mouseupRef = useEventListenerRef("mouseup", () => {
    console.log("mouse up");
  });
  const refs = useMergeRefs(mousedownRef, mouseupRef);
 
  return (
    <div>
      <h1>Rooks : useMergeRefs Example</h1>
      <hr></hr>
      <div
        ref={refs}
        style={{
          width: 250,
          height: 200,
          border: "blue 1px solid",
        }}
      >
        A div with multiple refs. Click me!!
      </div>
    </div>
  );
}
export default App;

Arguments

Argument valueTypeDescription
refsArrayTakes any number of refs. Refs can be mutable refs or function refs.

Returns

Return valueTypeDescription
refCallbackRefMerged ref

On this page