import { Meta, Story, Canvas, Controls } from "@storybook/blocks";
import * as MediaQueryStories from "./use-media-query.stories";

<Meta of={MediaQueryStories} />

# useMediaQuery

This hook detects whether a single media query or multiple media queries individually match. This hook is based on
[Chakra's useMediaQuery](https://chakra-ui.com/docs/hooks/use-media-query)

```typescript
import { useMediaQuery } from "@chromia/ui-kit";
```

## Usage

```typescript
const mediaQueries: [string, string, string, string] = [
  `(max-width: ${pxToRem(breakpoints.s - 1)})`,
  `(min-width: ${pxToRem(breakpoints.s)}) and (max-width: ${pxToRem(breakpoints.m - 1)})`,
  `(min-width: ${pxToRem(breakpoints.m)}) and (max-width: ${pxToRem(breakpoints.l - 1)})`,
  `(min-width: ${pxToRem(breakpoints.l)})`,
];
// Implementation of useBreakpoints which uses `useMediaQuery`
export const useBreakpoints = () => {
  const [s, m, l, xl] = useMediaQuery(mediaQueries);

  return { s, m, l, xl };
};
```

### Input and output

<Controls />

## Demo

In this example `larger then 1280px` and `less than or equal to 1280px` will be rendered depending on the screen width.

<Canvas style={{ background: "#1F1A23" }}>
  <Story id="hooks-usemediaquery--default" />
</Canvas>