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

<Meta of={CurrentBpStories} />

# useCurrentBreakpoint

This simple hook returns the breakpoint name as defined in the `media` key of the configuration object of
`createStitches` based on the `true` value from `useBreakpoints`. If all values are false `@initial` will be returned.

## Usage

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

### Return Value

<Controls />

## Demo

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