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

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

Powered by vercel