Usage with Cycle

Fela was always designed with React in mind, but is not bound to React by default.
If you want to use it with Cycle, you should also install the unofficial Cycle bindings for Fela(new tab).

yarn add cycle-fela

Fela in Cycle

To initiate cycle with fela, you need to replace your 

makeDomDriver
from 
@cycle/dom
with 
makeFelaDomDriver
provided by 
cycle-fela
. A basic setup should look something like this:

import xs from 'xstream'
import { run } from '@cycle/run'
import { div } from '@cycle/dom'
import { makeFelaDomDriver } from 'cycle-fela'


function main(sources) {
  const vdom$ = xs.of(div('Hello World'))
  return { DOM: vdom$ }
}


run(main, {
  DOM: makeFelaDomDriver('#app'),
})

Using Fela

Once you setup fela, 

cycle-fela
will look for the props 
component
in your elements to create the style. 
component
must be a function like fela's rules :

import xs from 'xstream'
import { run } from '@cycle/run'
import { div } from '@cycle/dom'
import { makeFelaDomDriver } from 'cycle-fela'


function main(sources) {
  const vdom$ = xs.of(
    div({ component: () => ({ color: 'red' }) }, 'Hello World')
  )
  return { DOM: vdom$ }
}


run(main, {
  DOM: makeFelaDomDriver('#app'),
})

makeFelaDomDriver
takes optional parameters.

An options object which let you pass the fela renderer options like plugins, enhancers. You can also use it to pass a custom DOMElement for your style with 

customStyleNode
and your theme for fela.

The third parameter is an array of static styles.

Read more about the options for 

makeFelaDomDriver
(new tab).

createComponent

cycle-fela exposes 

createComponent
like react-fela.
createComponent(new tab) help you create presentational components that can be reused in your app.

import xs from 'xstream'
import { run } from '@cycle/run'
import { makeFelaDomDriver, createComponent } from 'cycle-fela'


const RedDiv = createComponent(() => ({ color: 'red' }), 'div')


function main(sources) {
  const vdom$ = xs.of(RedDiv('Hello World'))
  return { DOM: vdom$ }
}


run(main, {
  DOM: makeFelaDomDriver('#app'),
})

Composition

For composition, you can either use 

combineRules
or 
createComponent
itself.

combineRules

import { combineRules } from 'fela'
import { createComponent } from 'cycle-fela'


const Red = () => ({ color: 'red' })
const Bold = () => ({ fontWeight: 'bold' })


const BoldRed = combineRules(Red, Bold)
export default createComponent(BoldRed, 'span')

createComponent

import { createComponent } from 'cycle-fela'


const RedSpan = createComponent(() => ({ color: 'red' }), 'span')
const Bold = () => ({ fontWeight: 'bold' })


export default createComponent(Bold, RedSpan)

Theming

Just like the React bindings, we provide a way to pass a theme to your components. The theme can be passed as an option to 

makeFelaDomDriver
.

const theme = { primaryColor: 'red' }


makeFelaDomDriver('#app', { theme })