1import { useSyncExternalStore } from "react";
2
3const subscribeToViewport = (onChange: () => void) => {
4 window.addEventListener("resize", onChange);
5 return () => window.removeEventListener("resize", onChange);
6};
7const readViewportWidth = () => window.innerWidth;
8const readViewportHeight = () => window.innerHeight;
9
10/** The window's CSS viewport, re-read on every resize. */
11export function useViewportSize() {
12 const width = useSyncExternalStore(subscribeToViewport, readViewportWidth);
13 const height = useSyncExternalStore(subscribeToViewport, readViewportHeight);
14 return { width, height };
15}