useWindowSize


Easily retrieve window dimensions with this React Hook which also works onResize.

Usage

import { useWindowSize } from 'reactchemy'

export default function Component() {
   const { width, height } = useWindowSize()

   return (
    <div>
      The current window dimensions are:{' '}
      <code>{JSON.stringify({ width, height })}</code>
    </div>
   )
}

Hook

import { useState } from 'react'

import { useEventListener, useIsomorphicLayoutEffect } from 'reactchemy'

interface WindowSize {
   width: number
   height: number
}

export 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()
   }, [])

   return windowSize
}