gem-hunter

Cycle React

npm install @cycle/react

Example

import xs from 'xstream';
import {render} from 'react-dom';
import {h, makeComponent} from '@cycle/react';

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 =>
    h('div', [
      h('h1', `Counter: ${i}`),
      h('button', {sel: inc}, 'Increment'),
    ]),
  );

  return {
    react: vdom$,
  };
}

const App = makeComponent(main);

render(h(App), document.getElementById('app'));

Usage

npm install @cycle/react

import xs from 'xstream'
import {h} from '@cycle/react'

function main(sources) {
  const vdom$ = xs.periodic(1000).map(i =>
    h('div', [
      h('h1', `Hello ${i + 1} times`)
    ])
  );

  return {
    react: vdom$,
  }
}

import xs from 'xstream'

function main(sources) {
  const vdom$ = xs.periodic(1000).map(i =>
    <div>
      <h1>Hello ${i + 1} times</h1>
    </div>
  );

  return {
    react: vdom$,
  }
}

import xs from 'xstream'
import {h} from '@cycle/react'

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

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

  const vdom$ = count$.map(x =>
    h('div', [
      h('h1', `Counter: ${x}`),
      h('button', {sel: 'inc'}),
    ])
  )

  return {
    react: vdom$,
  }
}

import React from "react";
import ReactDOM from "react-dom";
import { makeComponent, h } from "@cycle/react";

// React component
function Welcome(props) {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <button onClick={() => props.onPressWelcomeButton({ random: Math.random().toFixed(2) }) } >
        press me
      </button>
    </div>
  );
}

// Cycle.js component that uses the React component above
function main(sources) {
  const click$ = sources.react
    .select('welcome')
    .events('pressWelcomeButton')
    .debug('btn')
    .startWith(null);

  const vdom$ = click$.map(click =>
    h('div', [
      h(Welcome, { sel: 'welcome', name: 'madame' }),
      h('h3', [`button click event stream: ${click}`])
    ])
  );

  return {
    react: vdom$
  };
}

const Component = makeComponent(main);
ReactDOM.render(<Component />, document.getElementById('root'));

import xs from 'xstream'
import isolate from '@cycle/isolate'
import {h} from '@cycle/react'

function child(sources) {
  const elem$ = xs.of(
    h('h1', {sel: 'foo'}, 'click$ will NOT select this')
  )
  return { react: vdom$ }
}

function parent(sources) {
  const childSinks = isolate(child, 'childScope')(sources)

  const click$ = sources.react.select('foo').events('click')

  const elem$ = childSinks.react.map(childElem =>
    h('div', [
      childElem,
      h('h1', {sel: 'foo'}, `click$ will select this`),
    ])
  )

  return { react: elem$ }
}

const CycleApp = makeComponent(main, {
  HTTP: makeHTTPDriver(),
  history: makeHistoryDriver(),
});

const CycleApp = makeComponent(main);

const CycleApp = makeCycleReactComponent(() => {
  const reactDriver = (sink) => new ReactSource();
  const program = setup(main, {...drivers, react: reactDriver});
  const source = program.sources.react;
  const sink = program.sinks.react;
  const events = {...program.sinks};
  delete events.react;
  for (let name in events) if (name in drivers) delete events[name];
  const dispose = program.run();
  return {source, sink, events, dispose};
});

import {setup} from '@cycle/run';

function makeComponent(main, drivers, channel = 'react') {
  return makeCycleReactComponent(() => {
    const program = setup(main, {...drivers, [channel]: () => new ReactSource()});
    const source = program.sources[channel];
    const sink = program.sinks[channel];
    const events = {...program.sinks};
    delete events[channel];
    for (let name in events) if (name in drivers) delete events[name];
    const dispose = program.run();
    return {source, sink, dispose};
  });
}

function makeComponentReusing(main, engine, channel = 'react') {
  return makeCycleReactComponent(() => {
    const source = new ReactSource();
    const sources = {...engine.sources, [channel]: source};
    const sinks = main(sources);
    const sink = sinks[channel];
    const events = {...sinks};
    delete events[channel];
    const dispose = engine.run(sinks);
    return {source, sink, dispose};
  });
}

function fromSourceSink(source, sink) {
  return makeCycleReactComponent(() => ({source, sink}));
}

License