import { Canvas, Meta, Story } from "@storybook/addon-docs";
import useVibeMediaQuery from "..";
import "../../__stories__/general-hooks-stories.scss";
import styles from "./useVibeMediaQuery.modules.scss";
import { FunctionArgument, FunctionArguments } from "../../../storybook";

<Meta title="Hooks/useVibeMediaQuery" />

# useVibeMediaQuery

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

## Overview

This hook will return the value of the current vibe break point

| Value | Media query                                            |
| ----- | ------------------------------------------------------ |
| 1     | screen and (max-width: 767px)                          |
| 2     | screen and (max-width: 1023px) and (min-width: 768px)  |
| 3     | screen and (max-width: 1279px) and (min-width: 1024px) |
| 4     | screen and (max-width: 1439px) and (min-width: 1278px) |
| 5     | screen and (max-width: 1919px) and (min-width: 1440px) |
| 6     | screen and (min-width: 1920px)                         |

<Canvas>
  <Story name="Overview">
    {() => {
      const currentSize = useVibeMediaQuery();
      return <div className={`hooks-reference-element ${styles.container}`}>{currentSize}</div>;
    }}
  </Story>
</Canvas>

## Arguments

This hook doesn't receive any parameters

## Returns

<FunctionArguments>
  <FunctionArgument
    name="result"
    type="number"
    description="The current number which reference the current applied breakpoint"
  />
</FunctionArguments>
