

Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).

## Usage [#usage]

```tsx
import { useMediaQuery } from "@tilt-legal/cubitt-components/utilities/hooks";

const isSmallScreen = useMediaQuery('(max-width: 600px)');
// Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
```

## API [#api]

### Signature [#signature]

```ts
declare function useMediaQuery(query: string, { defaultValue, initializeWithValue, }?: UseMediaQueryOptions): boolean;
```

### Parameters [#parameters]

| Parameter   | Type                    | Description                                                      | Default |
| ----------- | ----------------------- | ---------------------------------------------------------------- | ------- |
| `query`     | `string`                | The media query to track.                                        | -       |
| `[options]` | `?UseMediaQueryOptions` | The options for customizing the behavior of the hook (optional). | -       |

### Return Value [#return-value]

| Value    | Type      | Description                                                                        |
| -------- | --------- | ---------------------------------------------------------------------------------- |
| `return` | `boolean` | The current state of the media query (true if the query matches, false otherwise). |
