Skip to content

UsageWithCycle.md

Latest commit

 

History

History
137 lines (96 loc) · 3.58 KB

UsageWithCycle.md

File metadata and controls

137 lines (96 loc) · 3.58 KB

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.

npm i --save cycle-fela

Fela in Cycle

To initiate cycle with fela, you need to :

import { makeFelaDomDriver } from 'cycle-fela'

makeFelaDomDriver should replace your makeDomDriver from @cycle/dom.

A really basic setup would looks 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')
})

Use 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 staticRules for fela.

You can find more informations about the options for makeFelaDomDriver here

createComponent

cycle-fela exposes createComponent like react-fela. createComponent 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 use combineRules e.g:

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')

Or createComponent like this:

import { createComponent } from 'cycle-fela'

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

export default createComponent(Bold, RedSpan)

Theming

Like react-fela, we provide a way to pass a theme to your components. the theme can be passed through options of makeFelaDomDriver:

const theme = { primaryColor: 'red' }

makeFelaDomDriver('#app', { theme })

More information

You can find more informations here and a complete example here

Related
⚡