a component kinda thingie to detect if an element is visible or hidden by css and came to view etc

VisibilityObserver.tsx

import React, { useState, useEffect, useRef } from 'react';

interface VisibilityObserverProps {
    children: (props: { elementRef: React.RefObject<HTMLDivElement>, isVisible: boolean }) => JSX.Element;
}

const VisibilityObserver: React.FC<VisibilityObserverProps> = ({ children }) => {
    const [isVisible, setIsVisible] = useState(false);
    const elementRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => {
                setIsVisible(entry.isIntersecting);
                // console.log(`VisibilityObserver :: useEffect :: entry.isIntersecting -> `, entry.isIntersecting);
            },
            { threshold: [0] }
        );

        if (elementRef.current) {
            observer.observe(elementRef.current);
        }

        return () => {
            if (elementRef.current) {
                observer.unobserve(elementRef.current);
            }
        };
    }, []);

    return children({ elementRef, isVisible });
};

export default VisibilityObserver;

how to use:

<VisibilityObserver>
  {({ elementRef, isVisible }) => (
    <div className="flex lg:hidden flex-col h-full" ref={elementRef}>
      Hello world
    </div>
  )}
</VisibilityObserver>;