Cycle.js driver that uses React DOM to render the view Sample in 2020

Cycle.js driver that uses React DOM to render the view Sample in 2020


tutorials -

Cycle ReactDOM

Cycle.js driver that uses React DOM to render the view

  • Provides a driver factory makeDOMDriver
  • Contains hyperscript helper functions, like in Cycle DOM
npm install @cycle/react-dom

Example

import xs from 'xstream';
import {run} from '@cycle/run';
import {makeDOMDriver, div, h1, button} from '@cycle/react-dom';

function main(sources) {
  const inc = Symbol();
  const inc$ = sources.react.select(inc).events('click');

  const count$ = inc$.fold(count => count + 1, 0);

  const vdom$ = count$.map(i =>
    div([
      h1(`Counter: ${i}`),
      button(inc, 'Increment'),
    ]),
  );

  return {
    react: vdom$,
  };
}

run(main, {
  react: makeDOMDriver(document.getElementById('app')),
});

API

makeDOMDriver(container)

Returns a driver that uses ReactDOM to render your Cycle.js app into the given container element.

Hyperscript helpers

Import hyperscript helpers such as div, span, p, button, input, etc to create React elements to represent the respective HTML elements: <div>, <span>, <p>, <button>, <input>, etc.

The basic usage is div(props, children), but some variations and shortcuts are allowed:

  • div() becomes h('div')
  • div('#foo') becomes h('div', {id: 'foo'})
  • div('.red') becomes h('div', {className: 'red'})
  • div('.red.circle') becomes h('div', {className: 'red circle'})
  • div('#foo.red') becomes h('div', {id: 'foo', className: 'red'})
  • div(propsObject) becomes h('div', propsObject)
  • div('text content') becomes h('div', 'text content')
  • div([child1, child2]) becomes h('div', [child1, child2])
  • div(props, 'text content') becomes h('div', props, 'text content')
  • div(props, [child1, child2]) becomes h('div', props, [child1, child2])
  • div('#foo.bar', props, [child1, child2])
  • etc

There are also shortcuts for (MVI) intent selectors:

  • div(someSymbol) becomes h('div', {sel: someSymbol})
  • div('inc#foo.bar') becomes h('div', {sel: 'inc', id: 'foo', className: 'bar'})
  • div('inc', props) becomes h('div', {sel: 'inc', ...props})
  • div('inc', 'text content') becomes h('div', {sel: 'inc'}, 'text content')
  • div('inc', [child1]) becomes h('div', {sel: 'inc'}, [child1])
  • div('inc', props, [child1]) becomes h('div', {sel: 'inc'}, [child1])
  • etc

GitHub

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff