Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the Intersection Observer API.
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}`} />
))}
</>
);
}