Neverending Perpetual Motion

    @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

    Install

    npm i @rooks/use-fork-ref

    DownloadsWeekly Downloads

    787

    Version

    4.11.2

    License

    MIT

    Unpacked Size

    9.17 kB

    Total Files

    13

    Last publish

    Collaborators

    • imbhargav5