rofrischmann/fela

# Usage with Cycle

Fela was always designed with React in mind, but is **not** bound to React by default.<br />
If you want to use it with Cycle, you should also install the unofficial [Cycle bindings for Fela](https://github.com/wcastand/cycle-fela).

```bash
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:

```javascript
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 :

```javascript
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](advanced/static-styles).

> Read more about the [options for `makeFelaDomDriver`](https://github.com/wcastand/cycle-fela#makefeladomdriver).

## createComponent

cycle-fela exposes `createComponent` like react-fela.<br />
[createComponent](https://github.com/wcastand/cycle-fela#createcomponent) help you create presentational components that can be reused in your app.

```javascript
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`](api/fela/combineRules) or `createComponent` itself.

### combineRules

```javascript
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

```javascript
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`.

```javascript
const theme = { primaryColor: 'red' }

makeFelaDomDriver('#app', { theme })
```

---

## Related

- [cycle-fela](https://github.com/wcastand/cycle-fela)
- [Usage Example](https://github.com/wcastand/cycle-fela-example)
- [API Reference - `combineRules` ](api/fela/combineRules)