import { Canvas, Meta } from "@storybook/blocks";
import * as UseMediaQueryStories from "./useMediaQuery.stories";

<Meta of={UseMediaQueryStories} />

# useMediaQuery

- [Overview](#overview)
- [Arguments](#arguments)
- [Returns](#returns)
- [Feedback](#feedback)

## Overview

This hook helps maps if a media query is matched or not

<Canvas of={UseMediaQueryStories.SingleRule} />

<Canvas of={UseMediaQueryStories.MultipleRules} />

## Arguments

<FunctionArguments>
  <FunctionArgument
    name="query"
    type="string | Array<string>"
    description={<>A string (or an array of strings) which represent a valid media query</>}
  />
</FunctionArguments>

## Returns

<FunctionArguments>
  <FunctionArgument
    name="result"
    type="Array<boolean>"
    description={
      <>
        An array with the matching media query set to true for example:
        <br /> <code>[true, false]</code> - the first media query applies and the second is not
      </>
    }
  />
</FunctionArguments>