xxxxxxxxxx
import { useState } from 'react'
import { useEventListener, useIsomorphicLayoutEffect } from 'usehooks-ts'
interface WindowSize {
width: number
height: number
}
function useWindowSize(): WindowSize {
const [windowSize, setWindowSize] = useState<WindowSize>({
width: 0,
height: 0,
})
const handleSize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
})
}
useEventListener('resize', handleSize)
// Set size at the first client-side load
useIsomorphicLayoutEffect(() => {
handleSize()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return windowSize
}
export default useWindowSize
xxxxxxxxxx
import { useEffect, useState } from 'react'
// Hook
export default function useWindowSize() {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
})
useEffect(() => {
// Handler to call on window resize
function handleResize() {
// Set window width/height to state
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
})
}
// Add event listener
window.addEventListener('resize', handleResize)
// Call handler right away so state gets updated with initial window size
handleResize()
// Remove event listener on cleanup
return () => window.removeEventListener('resize', handleResize)
}, []) // Empty array ensures that effect is only run on mount
return windowSize
}