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);const [isInViewport, ratio] = useInViewport(target);Basic usage of useInViewport hook.
| Property | Description | Type | Default |
|---|---|---|---|
| target | The DOM element or ref | Element | () => Element | MutableRefObject<Element> | - |
| options | The config options | Options | - |
| Property | Description | Type | Default |
|---|---|---|---|
| threshold | Either 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[] | - |
| rootMargin | The margin around the root. | string | - |
| root | The 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> | - |