# useWindowSize

> Tracks the viewport's { width, height }, updated on resize.

- Category: DOM
- Package: `hookli` (install with `npm i hookli`)
- Docs: https://hookli.vercel.app/docs/use-window-size

## Signature

```ts
useWindowSize(options?: UseWindowSizeOptions): WindowSize
```

## Parameters

- `options`: `UseWindowSizeOptions` (default: `{}`) — Hydration behaviour. Optional.

## Returns

- `width`: `number` — The viewport's inner width in pixels. 0 on the server and until hydration.
- `height`: `number` — The viewport's inner height in pixels. 0 on the server and until hydration.

## Types

### WindowSize

The viewport size reported by useWindowSize.

- `width`: `number` — The viewport's inner width in pixels.
- `height`: `number` — The viewport's inner height in pixels.

### UseWindowSizeOptions

Configures mount behaviour.

- `initializeWithValue`: `boolean` (default: `true`) — Read the real size synchronously on mount. Set false to start at 0 and populate after hydration.

## Usage

```tsx
import { useWindowSize } from "hookli";

export function Demo() {
  const { width, height } = useWindowSize();

  return <p>{width} × {height}</p>;
}
```

## Source

`src/hooks/use-window-size/use-window-size.ts`

```ts
import { useState } from "react";
import { useEventListener } from "../use-event-listener/use-event-listener";
import { useIsomorphicLayoutEffect } from "../use-isomorphic-layout-effect/use-isomorphic-layout-effect";

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

interface UseWindowSizeOptions {
  initializeWithValue?: boolean;
}

const IS_SERVER = typeof window === "undefined";

export function useWindowSize(options: UseWindowSizeOptions = {}): WindowSize {
  const { initializeWithValue = true } = options;

  const readSize = (): WindowSize => ({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  const [windowSize, setWindowSize] = useState<WindowSize>(() => {
    if (initializeWithValue && !IS_SERVER) return readSize();
    return { width: 0, height: 0 };
  });

  const handleSize = () => {
    if (IS_SERVER) return;
    setWindowSize(readSize());
  };

  useEventListener("resize", handleSize);

  useIsomorphicLayoutEffect(() => {
    handleSize();
  }, []);

  return windowSize;
}
```