useWindowSize

Features

• Optimized performance: Leverages a shared listener pool to reduce event subscriptions.
• Custom state tracking: disable internal state tracking with trackState.
• Event-driven updates: Provides an onChange callback for reacting to dimension changes.

Installation

npm install @1hook/use-window-size

Usage

import { defineUseWindowSize } from '@1hook/use-window-size'

export const useWindowSize = defineUseWindowSize({ ssr: true })

Setting ssr to true initializes width and height as undefined to prevent hydration mismatches between server and client.

const { width, height } = useWindowSize()

Use trackState: false to disable state tracking, the onChange callback is executed on mount and whenever the window size changes.

useWindowSize({
  trackState: false,
  onChange(size) {
    if (size.width < 600) {
      // do something
    }
  },
})

API Reference