useViewport.ts22 lines · main

1	'use client'
2
3	import { useEffect, useState } from 'react'
4
5	export type Viewport = { width: number; height: number }
6
7	function getViewport(): Viewport {
8	if (typeof window === 'undefined') return { width: 0, height: 0 }
9	return { width: window.innerWidth, height: window.innerHeight }
10	}
11
12	export function useViewport(): Viewport {
13	const [viewport, setViewport] = useState<Viewport>(getViewport)
14
15	useEffect(() => {
16	const onResize = () => setViewport(getViewport())
17	window.addEventListener('resize', onResize)
18	return () => window.removeEventListener('resize', onResize)
19	}, [])
20
21	return viewport
22	}