cycle-component v0.4.0

cycle-component

Easy, isolated MVI components for Cycle.js without boilerplate

Examples

A simple component can be defined by passing in a main function to component.

import component from 'cycle-component'
import { button } from '@cycle/dom'

export default component(sources => ({
  DOM: sources.props.map(props => button({ attrs: props })),
  click: sources.DOM.select('button').events('click')
}))

More complex components—or just stricter MVI components—can be defined by passing component an object with optional intent, model, view, and sinks functions.

import component from 'cycle-component'
import { button } from '@cycle/dom'

export default component({
  intent: sources => ({
    click$: sources.DOM.select('button').events('click'),
    props$: sources.props
  }),

  model: actions => actions.props$
    .map(props => ({ props })),

  view: state => button({ attrs: state.props }),

  sinks: ({ actions, vdom$ }) => ({
    DOM: vdom$,
    click: actions.click$
  })
})