Skip to content

v2.0.1

Compare
Choose a tag to compare
@onderonur onderonur released this 03 Apr 23:38

This is a major version bump.
It includes some fix for dynamically changing config object. When the given config changes, the hook wasn't re-render like it should. It would use the initially created IntersectionObserver instance. Now, we have this fixed.

Setting the Root Node

Also, we have a better API to set root node now.
Note: Both, useIntersectionObserver and useTrackVisibility has the same API. They just return different results.

Before v2

const getRoot = () => document.getElementById("rootNode")

function SomeComponent() {
     const [ref, { entry }] = useIntersectionObserver({ root: getRoot });

     // ...

     return (
          <div id="rootNode">
              <div ref={ref}>
                    Some content
              </div>
          </div>
     )
}

After v2

function SomeComponent() {
     const [ref, { entry, rootRef }] = useIntersectionObserver();

     // ...

     return (
          <div ref={rootRef } >
              <div ref={ref}>
                   Some content
              </div>
          </div>
     )
}

New wasEverVisible Field by useTrackVisibility

useTrackVisibility hook now returns a field (wasEverVisible) that flips to true when the observed node becomes visible once.

function SomeComponent() {
     const [ref, { isVisible, wasEverVisible }] = useTrackVisibility();

     // ...

     return (
          <div>
              <div ref={ref}>
                   Some content
              </div>
          </div>
     )
}