useWindowSize

1'use client'
2 
3import * as React from 'react'
4 
5interface WindowSize {
6  width: number
7  height: number
8}
9 
10export function useWindowSize(): WindowSize {
11  const windowSizeSubscriber = React.useCallback((callback: () => void) => {
12    const abortController = new AbortController()
13 
14    window.addEventListener('resize', callback, { signal: abortController.signal })
15 
16    return () => {
17      abortController.abort()
18    }
19  }, [])
20 
21  const getSnapshot = React.useCallback(() => {
22    return {
23      width: typeof window !== 'undefined' ? window.innerWidth : 0,
24      height: typeof window !== 'undefined' ? window.innerHeight : 0,
25    }
26  }, [])
27 
28  const getServerSnapshot = React.useCallback(() => {
29    return {
30      width: 0,
31      height: 0,
32    }
33  }, [])
34 
35  const windowSize = React.useSyncExternalStore(
36    windowSizeSubscriber,
37    getSnapshot,
38    getServerSnapshot,
39  )
40 
41  return windowSize
42}