useViewportHeight.tsx

import { useEffect, useState } from "react";

type VisualViewportData = {
  visualHeight: number,
  windowHeight: number,
};

export const useViewportHeight = (): VisualViewportData => {
  const [data, setData] = useState<VisualViewportData>({
    visualHeight: 0,
    windowHeight: 0,
  });

  useEffect(() => {
    const onChange = () => {
      setData({
        visualHeight: window.visualViewport.height,
        windowHeight: window.innerHeight,
      });
    };

    onChange();
    window.visualViewport.addEventListener('resize', onChange);
    return () => window.visualViewport.removeEventListener('resize', onChange);
  }, []);

  return data;
}