useIntersectionObserver

Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the Intersection Observer API.

Usage

import { useIntersectionObserver } from "@tealess/hooks";
const Section = (props) => {
const { isIntersecting, ref } = useIntersectionObserver({
threshold: 0.5,
});
console.log(`Render Section ${props.title}`, {
isIntersecting,
});
return (
<div ref={ref} style={{ minHeight: "100vh", display: "flex", border: "1px dashed #000", fontSize: "2rem", }} >
<div style={{ margin: "auto" }}>{props.title}</div>
</div>
);
};
export default function Component() {
return (
<>
{Array.from({ length: 5 }).map((_, index) => (
<Section key={index + 1} title={`${index + 1}`} />
))}
</>
);
}