import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { useBreakPoint } from './index';

<Meta title="Utilities/useBreakPoint" component={useBreakPoint} />

# useBreakPoint

The `useBreakPoint` hook returns a string with the browser's current break point value ('sm', 'md', 'lg', or 'xl') and triggers a rerender when it changes.

<Canvas>
  <Story id="utilities-usebreakpoint--normal" />
</Canvas>