Easy stateful React components
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
examples
flow-typed/npm
src
.flowconfig
.gitignore
.prettierrc
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
yarn.lock

README.md

React Routine

Build Status Coverage Status npm version

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

Examples