Responsive

Allows to build responsive layouts.

Screen Size

Size	Width
xs	0px
sm	576px
md	769px
lg	992px
xl	1200px
xxl	1600px

Breakpoint Hook Usage

We provide breakpoint hook that works on CSR

import { useBreakpoint } from '@woozdesign/ui';
const Component = () => {
  const breakpoint = useBreakpoint();
  return breakpoint.smAndUp ? <div>smAndUp</div> : <div>xs</div>;
};

Responsive Type

Props with type of Responsive<T> has following values.

Type	Values
Size	'xlarge' | 'large' | 'medium' | 'small'
MarginValue	'-12' | '-11' | ... | '11' | '12'
PaddingValue	'0' | '1' | ... | '11' | '12'
SpaceValue	'0' | '1' | ... | '11' | '12'
Display	'none' | 'block' | 'flex' | 'grid' | 'inline' | 'inline-flex' | 'inline-block' | 'inline-grid'
TextSize	'1' | '2' | ... | '11' | '12'
Inset	'0' | 'auto' | '50%' | '100%'
Flex	'0' | '1'
ScreenSize	SpaceValue | 'auto' | '100%' | 'min-content' | 'max-content'
Position	'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'

Usage

Responsive types can be used as responsive display

<Box
  style={{ background: 'var(--color-gray-4)' }}
  width={{
    initial: '12',
    md: '8',
    xl: '12',
  }}
  height={{
    initial: '12',
    md: '12',
    xl: '8',
  }}
/>