All hooks / Viewport and media

useWindowSize

168 B minified and brotliedSourceMarkdown✓ Works in all modern browsers

The window's inner width and height in CSS pixels, updated on resize. Like window.innerWidth, the width includes a visible vertical scrollbar; for the width without it, read document.documentElement.clientWidth or use useElementSize on a full-width element.

Renders serverValue on the server and during hydration, then switches to the real size with no hydration mismatch. Re-renders only when the size actually changes, on every resize event that changes it (not throttled).

Import

import { useWindowSize } from '@vincent.ri/react-tils'
// or only this hook
import { useWindowSize } from '@vincent.ri/react-tils/useWindowSize'

Usage

const { width, height } = useWindowSize()
return <canvas width={width} height={height} />

Live demo

When to use it

JS needs exact pixel values, e.g. canvas sizing, virtualized lists, or positioning a popover inside the viewport.

When not to

You only need a breakpoint; use useMediaQuery, which re-renders only when the breakpoint flips. For styling, use CSS. For an element's size, use CSS container queries or useElementSize.

API

function useWindowSize(serverValue?: WindowSize): WindowSize

Types

export type WindowSize = {
  width: number;
  height: number;
};