0.0.3 • Published 3 years ago
@kodai3/use-intersection v0.0.3
useIntersection
React sensor hook that tracks the changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. Uses the Intersection Observer API and returns a IntersectionObserverEntry.
Usage
import * as React from "react";
import { useIntersection } from "@kodai3/use-intersection";
const Demo = () => {
const intersectionRef = React.useRef(null);
const intersection = useIntersection(intersectionRef, {
root: null,
rootMargin: "0px",
threshold: 1,
});
return (
<div ref={intersectionRef}>
{intersection && intersection.intersectionRatio < 1
? "Obscured"
: "Fully in view"}
</div>
);
};
Reference
useIntersection(
ref: RefObject<HTMLElement>,
options: IntersectionObserverInit,
): IntersectionObserverEntry | null;