Guide
Reference
Roadmap
Guide
Reference
Roadmap

useElementVisibility

Tags:
Element

A React Hook that allows you to check if an element is visible in the viewport.

Demo

Scroll down on the dashed box to see the visibility status of the element.

Source
Element visibility:
false
Scroll down to see visibility
I'm the target element
The visibility will be false

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const visibility = useElementVisibility(elementTarget, options)

ElementTarget

ElementTarget is a union type that represents various kinds of elements that can be targeted.

See ElementTarget or ElementTarget Types for more details.

Options

export type UseElementVisibilityOptions = Pick<UseIntersectionObserverOptions, 'threshold'> & { /** * The target element to observe */ scrollTarget?: ElementTarget /** * A callback function that will be called when the visibility of the target element changes */ onChange?: (visibility: boolean) => void }

UseIntersectionObserverOptions is options of useIntersectionObserver, see useIntersectionObserver#options for more details.

Returns

A boolean value that indicates if the target element is visible in the viewport.