v3.0.1

Fixed peerDependencies by adding react-dom.

v3.0.0

• Migrated to monorepo structure by using Turborepo
• Bundling with tsup
• Better ESM/CJS support by checking publint and Are the Types Wrong

v2.1.1

Observer cache improvement for using different observers on the same element

v2.1.0

Observer cache & removed unnecessary useEffect

v2.0.6

Minor refactor for useTrackVisibility.

v2.0.5

IntersectionObserverHookArgs type is fixed by omitting root from IntersectionObserverInit.

v2.0.4

React 18 issue for unmount-remount in StrictMode is fixed

v2.0.3

Fix for typings of hook results.

v2.0.2

Minor changes for README.md.
Just published this to update it on npm.

v2.0.1

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>
     )
}