Intersection Observer Hooks Example

intersectionobserverwithhooks.js

// Import React and React Hooks for Triggering Animation
import React, { useState, useEffect, useRef } from 'react';

// From the Use Hooks Website
// https://usehooks.com/useOnScreen

// Also available as a Node Module
// https://github.com/thebuilder/react-intersection-observer

function useOnScreen(ref) {
  // State and setter for storing whether element is visible
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        // Update our state when observer callback fires
				setIntersecting(entry.isIntersecting);
				console.log("Look, I'm being observed!");
				
      },
      {
        threshold: [0]
      }
    );
    
    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      observer.unobserve(ref.current);
    };
  }, []); // This empty array makes sure the effect is only run on mount and unmount

  return isIntersecting;
}