# useMedia
> Matches a CSS media query and reactively updates when the viewport changes.

Tracks whether a CSS media query matches the current viewport and reactively updates when conditions change. Supports a default state for server-side rendering environments.

## Import

```js
import { useMedia } from '@volue/wave-react';
```

## Example

```jsx
() => {
  const isWide = useMedia('(min-width: 768px)');

  return (
    <Text>
      {'Viewport is ' + (isWide ? 'wide (>= 768px)' : 'narrow (< 768px)')}
    </Text>
  );
};
```

> **Note**
>
> `useMedia` uses `window.matchMedia` underneath, so provide a default state for server-side rendering where `window.matchMedia` is not available.

---

## API reference

### Arguments

| Name           | Type      | Default | Description                                                                        | Required |
| -------------- | --------- | ------- | ---------------------------------------------------------------------------------- | -------- |
| `query`        | `string`  | `—`     | A CSS media query string (e.g. "(min-width: 768px)").                              | Yes      |
| `defaultState` | `boolean` | `—`     | Default match state for SSR environments where `window.matchMedia` is unavailable. |          |

### Returns

`boolean`