React Routine

A simple alternative API for writing stateful React components. With it you can:

• Simplify data flow in components through chronological execution
• Declare explicity when you expect lifecycle events and callbacks
• Write components that are short and easy to reason about

Note: react-routine is currently unstable, expect some breaking changes

Installation

yarn add react-routine

# npm install --save react-routine

Example Script

import React from 'react'
import { routine, setState, componentWillMount, createHandlers } from 'react-routine'

const controller = function*() {
  // Get the initial props
  const initial = yield componentWillMount()

  // Set the initial sate
  yield setState({ value: initial.props.value })

  // Create a change handler we can listen to
  const { handlers } = yield createHandlers({ onChange: e => e.target.value })

  while (true) {
    // Wait for change handler
    const { result } = yield handlers.onChange
    // Set the new state
    yield setState({ value: result })
  }
}

const Input = props => <input onChange={props.onChange} value={props.value} />

export default routine(controller)(Input)

Documentation

• Getting Started

Examples

• Basic (source)