import { Meta } from "@storybook/blocks";

<Meta title="Hooks/use-match-media" />

# use-match-media hook

Detect whether or not a media query matches.

## Purpose

The use-match-media hook uses the native JavaScript API
[window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
to determine if the document matches a given media query string. It also
monitors the document when it’s being resized to check when it matches (or stops
matching) the media query.

## Usage

```jsx
import React from "react";
import { useMatchMedia } from "@conveyorhq/arrow-ds";

export const Component = () => {
  const isMobile = useMatchMedia("(max-width: 768px)");

  return (
    <Box className={isMobile ? "mobile" : "desktop"}>
      The current layout is {isMobile ? "mobile" : "desktop"}.
    </Box>
  );
};
```

## API

### query

Media query to check

Required: Yes<br />
Default value: N/A<br />
Type: `string`