codeQ Blog

Chào mừng mọi người đã đến với codeQ Blog

Custom hooks: useWindowSize

Đăng vào ngày No date
Cover Image for Custom hooks: useWindowSize

Bạn tạo 1 file useWindowSize.js có nội dung như sau:

import { useEffect, useState } from 'react'

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: 0,
    height: 0,
  })

  useEffect(() => {
    const handler = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

    handler()
    window.addEventListener('resize', handler)

    return () => {
      window.removeEventListener('resize', handler)
    }
  }, [])

  return windowSize
}

export default useWindowSize;

Sau đó sử dụng:

const HomeScreen = () => {
  const { width, height } = useWindowSize();
  
  return (
    <div>
    {/*...*/}
    </div>
  )
}
export default HomeScreen;

Chúc các bạn thành công.