React bindings for Fela

by React

Fela

Fela is a small, high-performant and framework-agnostic toolbelt to handle state-driven styling in JavaScript.

It is dynamic by design and renders your styles depending on your application state.

It generates atomic CSS and supports all common CSS features such as media queries, pseudo classes, keyframes and font-faces. Fela ships with a powerful plugin API adding e.g. vendor prefixing or fallback value support.

Fela can be used with React or with any other view library. It even supports React Native.

View demo Download Source

Installation

yarn add fela

You may alternatively use npm i --save fela.

Benefits

  • High Predictablity
  • Dynamic Styling
  • Scoped Atomic CSS
  • Dead-Code Elimination
  • Framework-Agnostic
  • Huge Ecosystem
  • Component-Based Styling
  • Universal Rendering
  • Many CSS Features

The Gist

Fela's core principle is to consider style as a function of state.

The whole API and all plugins and bindings are built on that idea.

It is reactive and auto-updates once registered to the DOM.

The following example illustrates the key parts of Fela though it only shows the very basics.

import { createRenderer } from 'fela'

// a simple style rule is a pure function of state
// that returns an object of style declarations
const rule = state => ({
  textAlign: 'center',
  padding: '5px 10px',
  // directly use the state to compute style values
  background: state.primary ? 'green' : 'blue',
  fontSize: '18pt',
  borderRadius: 5,
  // deeply nest media queries and pseudo classes
  ':hover': {
    background: state.primary ? 'chartreuse' : 'dodgerblue',
    boxShadow: '0 0 2px rgb(70, 70, 70)'
  }
})


const renderer = createRenderer()

// fela generates atomic CSS classes in order to achieve
// maximal style reuse and minimal CSS output
const className = renderer.renderRule(rule, { 
  primary: true
}) // =>  a b c d e f g

The generated CSS output would look like this:

.a { text-align: center }
.b { padding: 5px 10px }
.c { background: green }
.d { font-size: 18pt }
.e { border-radius: 5px }
.f:hover { background-color: chartreuse }
.g:hover { box-shadow: 0 0 2px rgb(70, 70, 70) }

Primitive Components

If you're using Fela, you're most likely also using React.

Using the React bindings, you get powerful APIs to create primitive components.

If you ever used styled-components, this will look very familiar.

Read: Usage with React for a full guide.

import { createComponent, Provider } from 'react-fela'
import { render } from 'react-dom'

const rule = props => ({
  textAlign: 'center',
  padding: '5px 10px',
  background: props.primary ? 'green' : 'blue',
  fontSize: '18pt',
  borderRadius: 5,
  ':hover': {
    background: props.primary ? 'chartreuse' : 'dodgerblue',
    boxShadow: '0 0 2px rgb(70, 70, 70)'
  }
})

const Button = createComponent(rule, 'button')

render(
  <Provider renderer={renderer}>
    <Button primary>Primary</Button>
    <Button>Default</Button>
  </Provider>,
  document.body
)

GitHub