AAAAAAAAAAAAAAAAAAAAA

Upgrade yourself / Est. 2015

How to Detect if an Element is in View with React

sketches

Sometimes we want to know if a particular element is in view to take some action. This can be useful for triggering animations, lazy loading images, or, as in our case, simply dynamically changing the background color of a section when a specific paragraph comes into view.

In this post, we will walk through how to implement this with a custom React hook, useIsVisible, to detect the visibility of the paragraph.

In the App.js file, we create a ref using useRef() and assign it to the paragraph element that we want to track. We pass this ref to the useIsVisible hook. The hook uses IntersectionObserver to observe when the paragraph is visible in the viewport.

// ... other code ...

// create a ref
const targetParagraph = useRef();
// send ref to our hook to return true or false based on visibility of ref in view
const targetParagraphVisible = useIsVisible(targetParagraph);

// ... other code ...

// styles
const styles = {
    dynamicBackground: {
    // !!! Here based on the value of targetParagraphVisible which will be true or falce we will assign pink or yellow background
      backgroundColor: targetParagraphVisible ? 'pink' : 'yellow',
    },
    // static styles
    fullViewportContainer: {
      height: '100vh',
      width: '100vw',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column',
    },
  };

// ... other code ...

// in the render part set ref to the paragraph
<p ref={targetParagraph}>It is initially yellow but as soon as this paragraph is visible, the background will change to pink</p>

The useIsVisible hook is the core part of our solution. This hook uses the IntersectionObserver API to detect whether the referenced element is currently in the viewport.

The hook returns a boolean (true or false) based on the visibility of the paragraph. This boolean is then used to dynamically change the background color of the section containing the paragraph.

Here’s how the useIsVisible hook is implemented in /hooks/useIsVisible.js:

import { useState, useEffect } from 'react';

export default function useIsVisible(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    // Create an IntersectionObserver to observe the ref's visibility
    const observer = new IntersectionObserver(([entry]) => 
      setIntersecting(entry.isIntersecting)
    );

    // Start observing the element
    observer.observe(ref.current);

    // Cleanup the observer when the component unmounts or ref changes
    return () => {
      observer.disconnect();
    };
  }, [ref]);

  return isIntersecting;
}

When the user scrolls down the page, the paragraph initially starts outside the viewport. As the user scrolls and the paragraph enters the viewport, the background color of the section changes from yellow to pink. This change is triggered by the useIsVisible hook, which detects the paragraph's visibility and updates the state accordingly.

Here is the final App.js:

import './App.css';
import useIsVisible from './hooks/useIsVisible.js';
import { useRef } from 'react';

function App() {
  // Create a ref for the paragraph which should trigger the background color change 
  const targetParagraph = useRef();
  
  // Pass it into our useIsVisible hook to determine if it's in view. The hook will return true or false which we will use for conditional styling
  const targetParagraphVisible = useIsVisible(targetParagraph);

  // Define static styles which will not change
  const styles = {
    fullViewportContainer: {
      height: '100vh',
      width: '100vw',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column',
    },
    dynamicBackground: {
    // !!! Here based on the value of targetParagraphVisible which will be true or falce we will assign pink or yellow background
      backgroundColor: targetParagraphVisible ? 'pink' : 'yellow',
    },
  };

  return (
    <div className="App">
      <section style={styles.fullViewportContainer}>
        <h1>First section</h1>
        <p>There is more content below the fold which is not currently visible in the viewport, scroll down</p>
      </section>

      <section style={{ ...styles.fullViewportContainer, ...styles.dynamicBackground }}>
        <h1>Second section</h1>
        
        {/* Assign the ref to the paragraph */}
        <p ref={targetParagraph}>It is initially yellow but as soon as this paragraph is visible, the background will change to pink</p>
      </section>
    </div>
  );
}

export default App;

Hope this helps!

GitHub repo with full code: https://github.com/barcelonacodeschool/check_if_element_is_in_the_view_react/tree/main




Back to posts