react-fela

React Fela

Official React bindings for Fela.

This package only includes React bindings for [ Fela](http://github.com/rofrischmann/fela).
It assumes you already know about Fela and how to use it.

Learn about Fela!

Installation

npm i --save react-fela

The package is also available on npmcdn for those not using npm.

You need to include React and Fela on your own as well.

<!-- Development build (with warnings)  -->
<script src="https://npmcdn.com/react-fela@1.0.0/dist/react-fela.js"></script>
<!-- Production build (minified)  -->
<script src="https://npmcdn.com/react-fela@1.0.0/dist/react-fela.min.js"></script>

API

<Provider renderer>

Renderer<renderer>

The <Provider> component should wrap your whole application. It only accepts a single prop which is your Fela Renderer.
It uses React's context to pass down the Renderer's render function. It actually is all you need to fully use Fela within your React application.

import { Provider } from 'react-fela'
import { render } from 'react-dom'
import React from 'react'

const renderer = new Renderer(mountNode, { /* config */})

render(
  <Provider renderer={renderer}>
    <App />
  </Provider>,
  document.getElementById('app')
)

Your components can now directly use the render function as fela.

import React, { PropTypes } from 'react'

// You may also use stateful class Components
// and call fela from this.context
const App = (props, { fela }) => {
  const className = fela(selector, { color: 'blue' })
  return (
    <div className={className}>
      I am blue. (Da ba dee da ba di)
    </div>
  )
}

App.contextTypes = { fela: PropTypes.func }
export default App

const selector = props => ({
  fontSize: '12px',
  fontWeight: 300,
  color: props.color,
  padding: '10px'
})

Helper HoCs

I have found that there are some recurring patterns on how to actually render your selectors and keyframes. To simplify those, this package provides two HoCs (Higher-order Components).

They only help to write clean and readable code. You do not have to use them nor do they ship any new feature you could not accomplish without.

bindPropsToFela(mapper)

Function?<mapper>

Used to automatically bind the component's props to the render function. This especially fits well if you follow the pattern of presentational and container components as the props passed to your component basically describe how a presentational component looks like. It passes the modified render function via props.
Optionally pass a custom mapper to alter the shape of the props passed to Fela.

// passes the props with the exact same keys
const EnhancedApp = bindPropsToFela()(App)

const mapper = props => ({
  marginTop: props.top,
  fontSize: props.size
})

// uses an additional mapper to alter the shape
// e.g. Component's `top` prop is passed as `marginTop`
const EnhancedApp = bindPropsToFela(mapper)(App)

bindStateToFela(mapper)

Function?<mapper>

Similar to bindPropsToFela but with a more dynamic nature. It binds the current component state to Fela's render function.
This is especially useful if you want to modify styles based on user input or user interaction. It adds the modified render function to the component itself (this.fela).
You may also pass a mapper to alter the shape. It also accepts the component's props as second parameter.

It only works with stateful class components as functional components do not have state at all.

const EnhancedApp = bindStateToFela()(App)

const mapper = (state, props) => ({
  fontSize: state.size,
  paddingLeft: props.padding,
  paddingRight: props.padding
})

const EnhancedApp = bindStateToFela(mapper)(App)

License

Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.

Changelog

11.0.0

| Package | Changes | | --- | --- | | fela<br>fela-dom | (#750) Added the sortMediaQuery config option for more flexible and dynamic media query sorting. It is backwards compatible and respects mediaQueryOrder, but we decided to do a major release nevertheless. | | fela-plugin-responsive-value | (#748) Introducing a plugin to resolve responsive media query values. | | fela-plugin-named-keys | (#749) The plugin now merges resolve key values with existing key values. | | fela-dom | (#741) Fixed a bug where in devMode @supports rules weren't rendered correctly.<br />Fixed a big where static styles, keyframes and fonts were rendered twice. |

10.0