@erosnicolau/animated-text/dist/hooks/useIntersectionObserver.js

Advanced React animated text component with comprehensive animation effects

import { useEffect, useRef, useState } from 'react';
// Removed external constants dependency
// Custom hook for IntersectionObserver with proper performance throttling
export const useIntersectionObserver = (options = {}) => {
    const [isIntersecting, setIsIntersecting] = useState(false);
    const elementRef = useRef(null);
    useEffect(() => {
        const element = elementRef.current;
        if (!element)
            return;
        // Set up IntersectionObserver for ALL elements, regardless of initial visibility
        // This ensures proper performance throttling and only triggers when actually needed
        const observer = new IntersectionObserver(([entry]) => {
            if (entry && entry.isIntersecting) {
                setIsIntersecting(true);
                // Once triggered, disconnect to prevent re-triggering
                observer.disconnect();
            }
        }, {
            threshold: 0.1, // Trigger when 10% of element is visible
            rootMargin: '0px 0px -100px 0px', // Start animation 100px before element enters viewport
            ...options
        });
        observer.observe(element);
        return () => observer.disconnect();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []); // Remove options dependency to prevent observer recreation
    return { elementRef, isIntersecting };
};