import { useState, useEffect } from 'react'
const useWindowSize = () => {
const [windowSize, setWindowSize] = useState({
width: 0,
height: 0,
})
useEffect(() => {
// only execute all the code below in client side
if (typeof window !== 'undefined') {
// Handler to call on window resize
const 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
}
export default useWindowSize
动态获取屏幕宽高【自定义Hooks】
最新推荐文章于 2024-03-20 21:21:47 发布