Vev Help Center
Search…
useIntersection hook
Tracks the portion of an element that intersects with the visible area of the screen (the viewport).

Usage

1
const el_intersection: false | IntersectionObserverEntry = useIntersection(ref: React.RefObject, options?: IObserverOptions);
Copied!

Relevant Interfaces

1
interface IntersectionObserverEntry {
2
//properties of the tracked reference element
3
boundingClientRect: DOMRectReadOnly;
4
//visible amount of the tracked reference element
5
intersectionRatio: number;
6
//properties of only the visible portion of the tracked reference element (a subset of boundingClientRect)
7
intersectionRect: DOMRectReadOnly;
8
isIntersecting: boolean;
9
rootBounds: DOMRectReadOnly | null;
10
target: Element;
11
time: number;
12
}
13
​
14
interface IObserverOptions {
15
//number of times the hook updates as the tracked element enters the visible screen. Defaults to 1.
16
steps?: number;
17
//decimal values indicating the intersection percentage at which the hook updates.
18
threshold?: number[];
19
}
Copied!
It is not possible to define both a step and a threshold. Define one at most.

Example

Display the percentage of a widget that intersects with the viewport. Update this value 10 times over the course of the widget’s entrance into the viewport.
1
import { useRef } from 'react';
2
import { useIntersection } from 'vev';
3
​
4
export default function() {
5
const widgetReference = useRef(null);
6
const intersection = useIntersection(widgetReference, {steps: 10});
7
​
8
return (
9
<div className="fill" ref={widgetReference}>
10
<h1>{ (intersection.intersectionRatio)*100 }</h1>
11
</div>
12
);
13
}
Copied!