12.0.3 • Published 4 years ago
@fela-next/fela-plugin-responsive-value v12.0.3
fela-plugin-responsive-value
This plugin adds support for responsive values as pioneered by styled-system where one passes an array of values that later resolved to respective media queries.
Warning: This package might clash with fela-plugin-fallback-value and thus requires a list of whitelisted properties. We recommend using it before the fallback value.
Installation
yarn add fela-plugin-responsive-value
You may alternatively use npm i --save fela-plugin-responsive-value
.
Usage
Make sure to read the documentation on how to use plugins.
import { createRenderer } from '@fela-next/fela'
import responsiveValue from '@fela-next/fela-plugin-responsive-value'
const renderer = createRenderer({
plugins: [ responsiveValue() ]
})
Configuration
Parameters
Parameter | Value | Default | Description |
---|---|---|---|
getMediaQueries | (Function) | Resolve the list of media queries used based on the values and props | |
properties | (Object) | A map of property-boolean pairs of which properties are resolved |
Example
import { createRenderer } from '@fela-next/fela'
import responsiveValue from '@fela-next/fela-plugin-responsive-value'
// if we have 2 values, use default and large media query
// if we get 3, also use a tablet media query in between
const getMediaQueries = (values, props) => {
if (values.length === 2) {
return ["@media (min-width: 1024px)"]
}
return ["@media (min-width: 800px)", "@media (min-width: 1024px)"]
}
const renderer = createRenderer({
plugins: [
responsiveValue(getMediaQueries, {
padding: true,
margin: true
})
]
})
Example
Using the above example code:
Input
{
margin: [0, 10]
padding: [5, 10, 15]
}
Output
{
margin: 0,
padding: 5,
"@media (min-width: 800px)": {
padding: 10
},
"@media (min-width: 1024px)": {
margin: 10,
padding: 15
}
}
License
Fela is licensed under the MIT License. Documentation is licensed under Creative Common License. Created with ♥ by @robinweser and all the great contributors.