Flowponent NPM

flowponent

A small library for Preact 10.x (and React - see "Usage with React") for defining workflow-like evolving views via generators.

Here's the canonical counter example (also available at Codesandbox):

import { render } from "preact";
import flowponent from "flowponent";

const App = flowponent(function*() {
  let count = 0;

  for (;;) {
    count += yield step => (
      <div>
        <div>current value: {count}</div>
        <button onClick={() => step(1)}>+1</button>
        <button onClick={() => step(-1)}>-1</button>
      </div>
    );
  }
});

render(<App />, document.getElementById("root"));

For a more involved one see here's a Codesandbox demonstrating composition, additional props & cleanups upon unmount:

Installation

$ npm install --save flowponent

Usage with React

The use flowponent with React, import from "flowponent/react" instead of "flowponent":

import React from "react";
import { render } from "react-dom";
import flowponent from "flowponent/react";

const App = flowponent(function*() {
  let count = 0;

  for (;;) {
    count += yield step => (
      <div>
        <div>current value: {count}</div>
        <button onClick={() => step(1)}>+1</button>
        <button onClick={() => step(-1)}>-1</button>
      </div>
    );
  }
});

render(<App />, document.getElementById("root"));