useForkRef

About

A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef

Examples

import "./styles.css";
import {
  useBoundingclientrectRef,
  useForkRef,
  useOutsideClickRef,
} from "rooks";

function App() {
  const [outsideClickRef] = useOutsideClickRef(() => {
    console.log("clicked outside");
  });
  const [
    myBoundingclientrectRef,
    boundingclientrect,
  ] = useBoundingclientrectRef();
  const myRef = useForkRef(outsideClickRef, myBoundingclientrectRef);
  return (
    <div>
      <h1>Rooks : useForkRef example </h1>
      <div
        ref={myRef}
        style={{
          background: "teal",
          color: "white",
          padding: 8,
          margin: 4,
          marginTop: 20,
        }}
      >
        <p>
          Click outside the box to see logs{" "}
          {JSON.stringify(boundingclientrect, 1, 2)}
        </p>
      </div>
    </div>
  );
}

export default App;

Arguments

Argument valueTypeDescription
ref2Callback/Mutable refFirst ref
ref1Callback/Mutable refSecond ref

Returns

Return valueTypeDescriptionDefault value
refCallback refA callback ref function that can internally combines both the refs from the arguments() => null

Original source

Note: Credit of this hook goes to material-ui

Source

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