google-maps-optimizations

Home   »   google-maps-optimizations

const useObserveVisibility = (element: Element | null): boolean => {
  const [visible, setVisible] = useState(false);
  console.log(element);
  useEffect(() => {
    if (!element) return;

    const observer = new IntersectionObserver(
      (changes) => {
        changes.forEach((change) => {
          if (change.isIntersecting) {
            setVisible(true);
          }
        });
      },
      {
        root: null, // relative to document viewport
        rootMargin: "0px", // margin around root
        threshold: 0, // visible amount of item shown in relation to root
      }
    );
    console.log(observer);
    observer.observe(element);
    return () => {
      observer.disconnect();
    };
  }, [element]);
  return visible;
};

export default function ObserverExample() {
  const [mapNode, mapRef] = useRefWithCallback();
  const showMap = useObserveVisibility(mapNode);
  return (
    
{showMap && }
); }

Leave a Reply

Your email address will not be published. Required fields are marked *