useInViewport

A hook that can observe whether the element is in the visible area, and the visible area ratio of the element.

const [isInViewport, ratio] = useInViewport(target);

Example

Basic usage of useInViewport hook.

API

| Property | Description | Type | Default | | -------- | ---------------------- | ----------------------------------------------------------- | ------- | --- | | target | The DOM element or ref | Element | () => Element | MutableRefObject<Element> | - | | | options | The config options | Options | - |

Options

PropertyDescriptionTypeDefault
thresholdEither a single number or an array of numbers which indicate at what percentage of the target's visibility the ratio should be executed.number | number[]-
rootMarginThe margin around the root.string-
rootThe element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null.Element | Document | () => (Element/Document) | MutableRefObject<Element>-
ON THIS PAGE