useViewport

Returns a Link containing an tuple of numbers representing the x and y position of the referenced element in the viewport. These numbers will range from 0 to 1 when the element is contained within the viewport.

Importing

1 
import { useViewport } from '@infinityfx/lively/hooks';

Usage

Call signature

1 
const [ref, link] = useViewport<T extends Element = any>(threshold)

Parameters

threshold?:number = 0.5

The minimum percentage, as a number between 0 and 1, of the element that needs to be visible within the viewport for the returned position to range between 0 and 1.

Returns

link:Link<[number, number]>

A link which can be used inside the animate property to create an animation.

ref:React.RefObject<T>

A React ref to attach to an Element.