https://github.com/dash-ui/responsive
A library for adding responsive style props to components with @dash-ui
https://github.com/dash-ui/responsive
Last synced: 3 months ago
JSON representation
A library for adding responsive style props to components with @dash-ui
- Host: GitHub
- URL: https://github.com/dash-ui/responsive
- Owner: dash-ui
- License: mit
- Created: 2020-07-30T21:03:50.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2022-08-18T01:04:17.000Z (almost 4 years ago)
- Last Synced: 2025-10-05T08:34:10.655Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 387 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
> A library for adding responsive styles to components with [dash-ui](https://github.com/dash-ui)
```sh
npm i @dash-ui/responsive
```
---
## Quick start
```tsx
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
}
```
## API
### responsive.variants()
#### Arguments
| Name | Type | Default | Required? | Description |
| ---- | ---- | ------- | --------- | ----------- |
| | | | | |
### responsive.lazy()
### responsive.one()
### responsive.cls()
## LICENSE
MIT