Nightly Procrastination Machine

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

    4.11.2 • Public • Published

    @rooks/use-intersection-observer-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 to register an intersection observer listener

    Installation

    npm install --save @rooks/use-intersection-observer-ref
    

    Importing the hook

    import useIntersectionObserverRef from '@rooks/use-intersection-observer-ref';

    Usage

    function Demo() {
      const [isVisible, setIsVisible] = useState(false);
      const callback = (entries) => {
        if (entries && entries[0]) {
          setIsVisible(entries[0].isIntersecting);
        }
      };
      const [myRef] = useIntersectionObserverRef(callback);
      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: 'red' }}></div>
          <div style={{ height: 2000 }}></div>
        </>
      );
      return null;
    }
    
    render(<Demo />);

    Arguments

    Argument Type Description Default Value
    callback IntersectionObserverCallback Callback that will be fired when the intersection occurs undefined
    options IntersectionObserverInit Intersection Observer config (read more) { root: null,rootMargin: "0px 0px 0px 0px", threshold: [0, 1]}

    Return

    Returns an array with the first element in the array being the callback ref for the React component/element that needs to be observed.

    Return value Type Description Default value
    ref CallbackRef ref for the React component/element that needs to be observed. null

    Install

    npm i @rooks/use-intersection-observer-ref

    DownloadsWeekly Downloads

    745

    Version

    4.11.2

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    13

    Last publish

    Collaborators

    • imbhargav5