useViewport

Tracks an element's relative location inside the screen viewport and exposes a reactive AnimationLink containing normalized x and y coordinates from 0 to 1.

Importing

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

Usage

Target

Call signature

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

Parameters

threshold?:number = 0.5

The relative offset ratio inside the target element to measure.

Returns

ref:React.RefObject<T | null>

A React ref to attach to the target element.

link:AnimationLink<{ x: number, y: number }>

A reactive AnimationLink containing relative viewport position ratios from 0 to 1.