API Reference

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.

Last updated June 11, 2021