Intersection Observer Hooks

These hooks help you track when an element enters or leaves the viewport.

Table of Contents

useInView

This hook just wraps the react-intersection-observer library which uses internally the IntersectionObserver API. As some old browsers don't support it, useInView also returns a supported prop indicating if it's supported or not.

Usage

import useInView from "@frontity/hooks/use-in-view";
const MyLazyElement = ({ children }) => {
// Get the reference and the visibility status.
const { ref, inView } = useInView({ triggerOnce: true });
// Pass the reference to the container and render `children` if
// the container is visible, or a placeholder otherwise.
return <div ref={ref}>{inView ? children : <MyPlaceholder />}</div>;
};

Parameters

It accepts a single object with the following props:

Name

Type

Default

Required

Description

root

Element

window

no

The Element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport (window) if not specified or if null.

rootMargin

string

"0px"

no

Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).

threshold

number or array of numbers

0

no

Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.

triggerOnce

boolean

false

no

Only trigger this method once

Return value

An object with the following properties:

Name

Type

Description

ref

React.RefObject

React reference object pointing to the DOM element. It must be passed to the element you want to track.

inView

boolean

Boolean indicating if the element is visible. The value is always true if supported is false.

supported

boolean

Boolean indicating if IntersectionObserver is supported by the browser.

Demo

This example project shows how to use the Intersection Observer Hook useInView available in the @frontity/hooks package or directly implemented in some components available at @frontity/components.