Function useViewportSize

packages/react-aria/src/utils/useViewportSize.ts:26–98

()

let visualViewport = typeof document !== 'undefined' && window.visualViewport;

export function useViewportSize(): ViewportSize {
  let isSSR = useIsSSR();
  let [size, setSize] = useState(() => (isSSR ? {width: 0, height: 0} : getViewportSize()));

  useEffect(() => {
    let updateSize = (newSize: ViewportSize) => {
      setSize(size => {
        if (newSize.width === size.width && newSize.height === size.height) {
          return size;
        }
        return newSize;
      });
    };

    // Use visualViewport api to track available height even on iOS virtual keyboard opening
    let onResize = () => {
      // Ignore updates when zoomed.
      if (visualViewport && visualViewport.scale > 1) {
        return;
      }

      updateSize(getViewportSize());
    };

    // When closing the keyboard, WebKit on iOS does not fire the visual viewport resize event until the animation is complete.
    // We can anticipate this and resize early by handling the blur event and using the layout size.
    let frame: number;
    let onBlur = (e: FocusEvent) => {
      if (visualViewport && visualViewport.scale > 1) {
        return;
      }

      if (willOpenKeyboard(getEventTarget(e) as Element)) {
        // Wait one frame to see if a new element gets focused.
        frame = requestAnimationFrame(() => {
          let activeElement = getActiveElement();
          if (!activeElement || !willOpenKeyboard(activeElement)) {
            updateSize({
              width: document.documentElement.clientWidth,
              height: document.documentElement.clientHeight
            });
          }
        });
      }
    };

    updateSize(getViewportSize());

    if (isIOS() && isWebKit()) {
      window.addEventListener('blur', onBlur, true);
    }

    if (!visualViewport) {
      window.addEventListener('resize', onResize);
    } else {
      visualViewport.addEventListener('resize', onResize);
    }