useWindowSize

Browser

Installation

npx usehooks-cli@latest add use-window-size

Description

A React hook for tracking the browser window dimensions with automatic updates on resize events and SSR compatibility.

Return Type

WindowSize

Property	Type	Description
width	number	Current window width in pixels
height	number	Current window height in pixels

Examples

Responsive Component Behavior

Adapting component layout based on window size

const { width, height } = useWindowSize();
const isMobile = width < 768;
const isTablet = width >= 768 && width < 1024;
const isDesktop = width >= 1024;

return (
  <div className={`container ${isMobile ? 'mobile' : isTablet ? 'tablet' : 'desktop'}`}>
    <h1>Current Window Size</h1>
    <p>Width: {width}px</p>
    <p>Height: {height}px</p>
    <p>Device: {isMobile ? 'Mobile' : isTablet ? 'Tablet' : 'Desktop'}</p>
    
    {isMobile && (
      <div>Mobile-specific content</div>
    )}
    
    {isDesktop && (
      <div className="desktop-sidebar">
        Desktop sidebar content
      </div>
    )}
  </div>
);

Dynamic Grid Layout

Adjusting grid columns based on available width

const { width } = useWindowSize();

const getGridColumns = (windowWidth) => {
  if (windowWidth < 640) return 1;
  if (windowWidth < 1024) return 2;
  if (windowWidth < 1280) return 3;
  return 4;
};

const columns = getGridColumns(width);

return (
  <div 
    className="grid"
    style={{
      gridTemplateColumns: `repeat(${columns}, 1fr)`,
      gap: '1rem'
    }}
  >
    {items.map((item, index) => (
      <div key={index} className="grid-item">
        {item.content}
      </div>
    ))}
  </div>
);

Conditional Rendering with Breakpoints

Showing different components based on screen size

const { width } = useWindowSize();

const breakpoints = {
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280
};

const Navigation = () => {
  if (width < breakpoints.md) {
    return <MobileNavigation />;
  }
  
  return <DesktopNavigation />;
};

const Sidebar = () => {
  // Only show sidebar on larger screens
  if (width < breakpoints.lg) {
    return null;
  }
  
  return (
    <aside className="sidebar">
      <SidebarContent />
    </aside>
  );
};

return (
  <div className="app-layout">
    <Navigation />
    <main className="main-content">
      <Content />
    </main>
    <Sidebar />
  </div>
);

Dependencies

react

Notes

•Returns { width: 0, height: 0 } during SSR to prevent hydration mismatches
•Automatically updates when the window is resized
•Uses window.innerWidth and window.innerHeight for accurate viewport dimensions
•Properly cleans up event listeners on component unmount
•Calls resize handler immediately to get initial window size
•Safe to use in SSR environments like Next.js

Implementation

'use client';

import { useState, useEffect } from "react";

interface WindowSize {
  width: number;
  height: number;
}

function useWindowSize(): WindowSize {
  const [windowSize, setWindowSize] = useState<WindowSize>(() => {
    // Check if we're in a browser environment
    if (typeof window !== "undefined") {
      return {
        width: window.innerWidth,
        height: window.innerHeight,
      };
    }
    // Default values for SSR
    return {
      width: 0,
      height: 0,
    };
  });

  useEffect(() => {
    // Only run on client side
    if (typeof window === "undefined") {
      return;
    }

    function handleResize() {
      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);
  }, []);

  return windowSize;
}

export default useWindowSize;

useTimeout

CLI Docs All Hooks