@rooks/use-fork-ref
TypeScript icon, indicating that this package has built-in type declarations

4.11.2 • Public • Published

@rooks/use-fork-ref

Note: Future updates to this package have moved to the main package rooks. All hooks now reside in a single package which you can install using

npm install rooks

or

yarn add rooks

Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!

TitleCard

Build Status

About

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

Installation

npm install --save @rooks/use-fork-ref

Importing the hook

import useForkRef from "@rooks/use-fork-ref"

Usage

function Demo() {
  const [isVisible, setIsVisible] = useState(false);
  const callback = entries => {
    if (entries && entries[0]) {
      setIsVisible(entries[0].isIntersecting);
    }
  };
  const [myIntersectionObserverRef] = useIntersectionObserverRef(callback);
  const [
    myBoundingclientrectRef,
    boundingclientrect
  ] = useBoundingclientrectRef();
  const myRef = useForkRef(myIntersectionObserverRef, myBoundingclientrectRef);
  const displayString = JSON.stringify(boundingclientrect, null, 2);
  return (
    <>
      <div
        style={{
          position: "fixed",
          top: 0,
          right: 0
        }}
      >
        <h1>Is rectangle visible - {String(isVisible)}</h1>
      </div>
      <div style={{ height: 2000 }}></div>
      <div ref={myRef} style={{ height: 300, background: "lightblue" }}>
        <p>Boundingclientrect</p>
        <pre>{displayString}</pre>
      </div>
      <div style={{ height: 2000 }}></div>
    </>
  );
}

render(<Demo/>)

Arguments

Argument value Type Description
ref2 Callback/Mutable ref First ref
ref1 Callback/Mutable ref Second ref

Returns

Return value Type Description Default value
ref Callback ref A 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

Package Sidebar

Install

npm i @rooks/use-fork-ref

Weekly Downloads

117

Version

4.11.2

License

MIT

Unpacked Size

9.17 kB

Total Files

13

Last publish

Collaborators

  • imbhargav5