Hypothetical React Event Pipeline

react-event-pipeline.jsx

import { pipe as $, string, preventDefault, blockOn } from 'react-event-pipeline'

function onSubmit(form) {
  return $(preventDefault, blockOn(() => form.isSubmittable), onSave(form.serialized));
}

export default function Settings({ flares, knotsPerFlare, onSave }) {
  return (
    <State type={Form} value={{ flares, knotsPerFlare }}>
      {form => {
        return (
          <form onSubmit={onSubmit(form)}>

            <label>
              Number of flares <input type="number" onChange={$(string, form.flares.set)} value={form.flares.state} />
            </label>

            <label>
              Knots per flare <input type="number" onChange={$(string, form.knotsPerFlare.set)} value={form.knotsPerFlare.state} />
            </label>

            <button type="submit" disabled={form.isUnchanged}>Save</button>
          </form>
        )
      }}
    </State>
  )
}