Typed HooksGetting StarteduseWindowResize

useWindowResize

A custom hook for managing window resize events in React.

useWindowResize is a custom React hook that provides an easy way to track window dimensions in your functional components. It automatically updates when the browser window is resized, making it perfect for building responsive interfaces or implementing size-dependent features.

The hook includes built-in debouncing using shaddy's built-in custom useDebouncedCallback hook to prevent excessive re-renders during resize events, and leverages the useEventListener hook for efficient and type-safe event handling. It also handles server-side rendering gracefully by checking if the window object is available.

Width
0px
×
Height
0px
Resize your browser window to see changes
Viewport Size: Small (Mobile)

API

▸ useWindowResize(): WindowSize

Returns

  • Returns an object with the following properties:
PropertyTypeDescription
widthnumber | undefinedCurrent window width in pixels. undefined during server-side rendering.
heightnumber | undefinedCurrent window height in pixels. undefined during server-side rendering.

Hook

import { useState, useEffect, useCallback } from 'react'
import { useDebouncedCallback } from '@/hooks/use-debounced-callback'
import { useEventListener } from '@/hooks/use-event-listener'
 
/**
 * ⚠️ IMPORTANT DEPENDENCY NOTICE ⚠️
 * --------------------------------------
 * If you encounter import errors with useDebouncedCallback or useEventListener:
 *
 * 1️⃣ useDebouncedCallback: https://shaddy-omega.vercel.app/typed-hooks/use-debounced-callback
 * 2️⃣ useEventListener: https://shaddy-omega.vercel.app/typed-hooks/use-event-listener
 *
 * We HIGHLY RECOMMEND using these specific implementations as they are:
 *  - Performance optimized
 *  - Well tested
 *  - Properly typed
 * --------------------------------------
 * REMOVE THIS NOTICE ONCE YOU HAVE THE DEPENDENCIES INSTALLED
 */
 
/**
 * Custom React hook to get the current window size.
 *
 * @example
 * const Component = () => {
 *   const { width = 0, height = 0 } = useWindowResize();
 *   return (
 *     <div>
 *       <p>Width: {width}</p>
 *       <p>Height: {height}</p>
 *     </div>
 *   );
 * };
 *
 * @returns {{ width: number | undefined, height: number | undefined }}
 * An object containing the width and height of the window.
 */
 
type WindowSize = {
  width: number | undefined
  height: number | undefined
}
 
type UseWindowResize = () => WindowSize
 
export const useWindowResize: UseWindowResize = () => {
  const isServer = typeof window === 'undefined'
 
  const [windowSize, setWindowSize] = useState<WindowSize>({
    width: isServer ? undefined : window.innerWidth,
    height: isServer ? undefined : window.innerHeight,
  })
 
  const debouncedSetWindowSize = useDebouncedCallback((newSize: WindowSize) => {
    setWindowSize(newSize)
  }, 200)
 
  const handleResize = useCallback(() => {
    const newSize = {
      width: window.innerWidth,
      height: window.innerHeight,
    }
    debouncedSetWindowSize(newSize)
  }, [debouncedSetWindowSize])
 
  /** Set initial size */
  useEffect(() => {
    if (!isServer) {
      handleResize()
    }
  }, [handleResize, isServer])
 
  /** Use the event listener hook to handle resize events */
  useEventListener('resize', handleResize)
 
  return windowSize
}
usePrevioususeEventListener