useVisible

Creates a Trigger which triggers when the referenced element enters or leaves the browser window.

Importing

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

Usage

Call signature

1 
const [ref, trigger] = useVisible<T extends Element = any>({ enter, exit, threshold })

Parameters

enter?:boolean | number = 1

On how many times the element becomes visible to call trigger. A value of false corresponds to 0 and a value of true to Infinity.

exit?:boolean | number = false

On how many times the element becomes invisible to call trigger. A value of false corresponds to 0 and a value of true to Infinity.

threshold?:number = 0.5

The percentage, as a number between 0 and 1, of the element that needs to be visible or hidden for the trigger to activate.

Returns

trigger:Trigger

A Trigger which can be used inside the triggers property to trigger an animation.

ref:React.RefObject<T>

A React ref to attach to an Element.