React Custom Hooks : useOnScreen Hook And The Intersection Observer API

In the world of web development, creating responsive web applications that adapt to various screen sizes and user interactions is crucial. One key aspect of this is knowing when elements come into view or go out of view as the user scrolls. The useOnScreen hook, built with React and the Intersection Observer API, is a valuable tool for achieving this.

In this blog post, we'll explore what the useOnScreen hook is, why it's essential for building responsive web apps, and how to use it effectively in your projects.

Understanding the Intersection Observer API

Before diving into the useOnScreen hook, it's essential to understand the Intersection Observer API. This API allows you to observe elements and track their visibility in relation to a parent element or the viewport.

The key concept is the "intersection," which is the portion of the target element that overlaps with the parent element or viewport. The Intersection Observer API notifies you when this intersection changes, such as when an element enters or exits the viewport.

Create an Intersection Observer Object:

const options = {
  root: null, // Use the viewport as the root
  rootMargin: '0px', // Margin around the root
  threshold: 0.5 // Intersection ratio needed for the callback to trigger
};

const observer = new IntersectionObserver(callback, options);

• root: The element to use as the viewport for checking the intersection. Set to null for the top-level viewport.

• rootMargin: A margin around the root element.

• threshold: A value between 0 and 1 indicating the percentage of the target element that must be visible for the callback to trigger.

What is the useOnScreen Hook?

The useOnScreen hook is a custom React hook that simplifies working with the Intersection Observer API. It enables you to determine whether a specified HTML element is currently visible within the user's viewport. This information is essential for implementing various features in your web applications, such as lazy loading images, triggering animations, or applying styles as elements scroll into view.

Building the useOnScreen Hook

Let's break down the key parts of the useOnScreen hook code snippet you provided:

export default function useOnScreen(ref, rootMargin = "0px") {
    const [isVisible, setIsVisible] = useState(false)
    useEffect(() => {
        if (ref.current == null) return
        const observer = new IntersectionObserver(
            ([entry]) => setIsVisible(entry.isIntersecting),
            { rootMargin }
        )
        observer.observe(ref.current)
        return () => {
            if (ref.current == null) return
            observer.unobserve(ref.current)
        }
    }, [ref.current, rootMargin])
    return isVisible
}

Here's a step-by-step breakdown of what this hook does:

1. Importing React: The hook begins by importing React, which is necessary since it's built for React applications.

2. Function Signature: The useOnScreen function is defined as a default export. It takes two parameters: ref and rootMargin. The ref parameter is a reference to the HTML element you want to observe for visibility changes, and rootMargin allows you to specify margins around the root (viewport or a parent element) for the intersection calculations.

3. State Management: The hook initializes a state variable isVisible using the useState hook. This state variable will hold the visibility status of the observed element.

4. Effect Hook: Inside the useEffect hook, the code checks if the ref is not null (i.e., the element to observe exists).

5. Intersection Observer Setup: It creates a new IntersectionObserver instance, passing a callback function that will be called whenever the intersection changes. In this callback, it updates the isVisible state based on the entry.isIntersecting value. When the observed element enters or exits the viewport (or the specified rootMargin), this callback is triggered.

6. Observing the Element: The hook calls observer.observe(ref.current) to start observing the specified element. This means that the callback function will be called whenever there's an intersection change.

7. Cleanup: To prevent memory leaks, the hook returns a cleanup function inside the useEffect. This function calls observer.unobserve(ref.current) to stop observing the element when the component unmounts.

8. Return Value: Finally, the hook returns the isVisible state, which you can use in your component to conditionally render content or apply styles based on the element's visibility.

Using useOnScreen in Your Components

To use the useOnScreen hook in your components, follow these steps:

1. Import the useOnScreen hook:

import useOnScreen from './useOnScreen'; // Replace with the actual path to your hook file

1. Create a ref for the element you want to observe:

const myElementRef = useRef();

1. Use the useOnScreen hook within your component:

const isVisible = useOnScreen(myElementRef, '0px');

1. Apply conditional rendering or styles based on isVisible:

return (
    <div ref={myElementRef}>
        {isVisible ? <p>This element is visible!</p> : <p>Scroll to reveal me!</p>}
    </div>
);

Conclusion

The useOnScreen hook simplifies the process of working with the Intersection Observer API in your React applications. It's a valuable tool for building responsive web apps that respond to user interactions, such as lazy loading images or triggering animations as elements come into view