How to use the Intersection Observer in React

Today we will explore how to use the intersection observer API in React with some examples.

Mozilla web documentation describes the intersection observer API as:

allows code to register a callback function that runs whenever an element they want to monitor enters or leaves another element (or the viewport), or when the value by which the two intersect changes of a requested amount. This way, sites no longer need to do anything on the main thread to observe this type of intersection of elements, and the browser is free to optimize intersection management as it sees fit.

In short, it allows us to detect when a certain element is visible in the viewport, this only happens when the element meets the desired intersection ratio.

As you can see, if you scroll down the page the intersection ratio will increase until it reaches the projected limit and at that moment the function that executes a callback is triggered.

---

First step

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

The intersection observer constructor object needs two arguments:

1. A callback function
2. Options

That's all, we're ready to see some action, but first, we need to know what each option means, the options argument is an object with the following values:

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

• root: The element that is used as a viewport to check the visibility of the target. Must be the target's ancestor. Defaults to browser viewport if not specified or null.
• rootMargin: This set of values ​​is used to increase or decrease each side of the root element's bounding box before calculating the intersections, the options are similar to those for margin in CSS.
• threshold: A single number or an array of numbers that indicates at what percentage of the target's visibility the observer callback should run, ranges from 0 to 1.0, where 1.0 means each pixel is visible in the viewport.

---

Using in React

Now we will see an implementation of the intersection observer API in React.

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

1. Start with a reference to the element we want to observe, use the react hook useRef.
2. Create a state variable isVisible, we will use it to display a message whenever our box is in the viewport.
3. Declare the callback function that will receive an array of IntersectionObserverEntries as a parameter, within this function we take the first and only entry and check if it is intersecting with the viewport and if it is then we call setIsVisible with the value of entry.isIntersecting (true / FALSE).
4. Create the options object with the same values ​​as the image.
5. Add the useEffect react hook and create an observer constructor using the callback function and options we just created before. It's optional in our case, but it can return a cleanup function to unwatch our target when the component is unmounted.
6. Set the useRef variable on the element we want to observe.

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

1. Let's add some style to this html.

1. That's all we need, simple and easy!

Remember, this is just a basic implementation and there are several ways to do this.

---

Now we will implement the same code we did previously, but separating all the logic in a nu hook called useElementOnScreen.

const containerRef = useRef(null)
const [isVisible, setIsVisible] = useState(false)

const callbackFunction = (entries) => {
  const [entry] = entries
  setIsVisible(entry.isIntersecting)
}

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0
}

useEffect(() => {
  const observer = new IntersectionObserver(callbackFunction, options)
  if (containerRef.current) observer.observe(containerRef.current)

  return () => {
    if (containerRef.current) observer.unobserve(containerRef.current)
  }

}, [containerRef, options])

return (
  <div classname="app">
    <div classname="isVisible">{isVisible ? "IN VIEWPORT" : "NOT IN VIEWPORT"}</div>
    <div classname="section"></div>
    <div classname="box" ref="{containerRef}">Observe me</div>
  </div>
)

1. Create a new function called useElementOnScreen with parameter options
2. Move the entire useRef, useState and useEffect inside our new hook.
3. Now the only thing missing from our hook is the return statement, we pass isVisible and containerRef as an array.
4. ok, we're almost there, we just need to call it in our component and see if it works!

<div classname="box" ref="{containerRef}">Observe me</div>

1- Import the newly created hook into our component.
2 - Initialize it with the options object.
3 - This is how we finish.

Congratulations, we have successfully used the intersection observer API and even created a hook for it!

---

Credits

Intersection Observer using React, originally written by producthackers

Thank you for reading this article. I hope I can provide you with some useful information. If so, I would be very happy if you would recommend this post and click the ♥ button so more people can see this.

The above is the detailed content of How to use the Intersection Observer in React. For more information, please follow other related articles on the PHP Chinese website!