A library for adding responsive styles to components with dash-ui

npm i @dash-ui/responsive

Quick start

import {styles} from '@dash-ui/styles'
import responsive from '@dash-ui/responsive'

const responsiveStyle = responsive(styles, {
  phone: 'only screen and (min-width: 0em)'
  tablet: 'only screen and (min-width: 20em)'
  desktop: 'only screen and (min-width: 50em)'
})

const myResponsiveStyle = responsiveStyle.variants({
  default: {
    display: 'block'
  },
  flex: {
    display: 'flex'
  }
})

const MyComponent = ({display}) => {
  return <div className={myResponsiveStyle(display)}/>
}

<MyComponent display={{phone: 'default', tablet: 'flex'}}/>

API

responsive.variants()

Arguments

| Name | Type | Default | Required? | Description | | ---- | ---- | ------- | --------- | ----------- | | | | | | |

responsive.lazy()

responsive.one()

responsive.cls()

LICENSE

MIT