useWindowSize

Hook

Tracks the current window dimensions. Updates on resize.

npx arupui add use-window-size

Usage

use-window-size.tsx
import { useWindowSize } from "@/hooks/use-window-size"

function ResponsiveGrid() {
  const { width } = useWindowSize()
  const columns = width > 1024 ? 4 : width > 768 ? 2 : 1

  return <div style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }} />
}

Returns

{ width: number, height: number }
Theme Editor

Theme

Radius0.5rem
Letter Spacing0em

Colors

light