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

<Meta of={BreakpointStories} />

# useBreakpoints

This hook uses `useMediaQuery` to detect which of the breakpoints in `src/ui-kit/theme/breakpoints.ts` is
currently active. Only one breakpoint will be active at any point except when the screen width is smaller than the
smallest breakpoint in which case all breakpoints will be false.

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

## Usage

```typescript
const { s, m, l, xl } = useBreakpoints();
```

### Return Value

<Controls />

## Demo

In this example only one of `s`, `m`, `l` and `xl` will be true at any point in time **except** if the
current screen width is smaller than the smallest breakpoint. **We may want to change this so that from 0 to the
smallest breakpoint `s` should be true. We may also want to change the names of the keys of the object that the
hook returns.**

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