https://github.com/jsonnull/react-routine

Easy stateful React components
https://github.com/jsonnull/react-routine

react

Last synced: 3 months ago
JSON representation

Easy stateful React components

• Host: GitHub
• URL: https://github.com/jsonnull/react-routine
• Owner: jsonnull
• License: mit
• Created: 2018-02-15T00:50:37.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-15T00:22:24.000Z (over 6 years ago)
• Last Synced: 2024-04-24T18:55:45.363Z (8 months ago)
• Topics: react
• Language: JavaScript
• Homepage:
• Size: 167 KB
• Stars: 13
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Routine

[![Build Status](https://travis-ci.org/jsonnull/react-routine.svg?branch=master)](https://travis-ci.org/jsonnull/react-routine)

[![Coverage Status](https://coveralls.io/repos/github/jsonnull/react-routine/badge.svg?branch=master)](https://coveralls.io/github/jsonnull/react-routine?branch=master)

[![npm version](https://img.shields.io/npm/v/react-routine.svg)](https://www.npmjs.com/package/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

```sh

yarn add react-routine

# npm install --save react-routine

```

### Example Script

```JavaScript

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 => 

export default routine(controller)(Input)

```

## Documentation

 - [Getting Started](docs/getting-started.md)

## Examples

 - Basic ([source](examples/))