fela-plugin-responsive-value

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'
import responsiveValue from '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'
import responsiveValue from '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.

Changelog

11.2.0

| Package | Changes | | --- | --- | | fela | (#756) Added a generateClassName function to renderer which can now be overwritten | | fela<br>fela-dom<br>react-fela<br>preact-fela<br>infero-fela<br>reason-fela<br>fela-bindings | (#768) Added a new renderer option styleNodeAttributes for adding custom attributes to generated style nodes | | fela-utils | (#766) Fixed IE 11 compatibility issues | | fela-sort-media-query-mobile-first<br>fela-preset-web | (#769) Updated TypeScript definitions | | fela<br>fela-plugin-prefixer<br>react-fela | (#763) Added UMD builds for these specific packages - more to come |