Skip to content

emilmork/react-miniflow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Install

$ npm install react-miniflow

Usage

var React = require('react');
import { State, Enhance } from 'react-miniflow';

State.init({count: 0});

// Enhance component and listen for count updates
var Component = Enhance(
  class extends React.Component {
    render() {
      return <h2>{ this.props.count }</h2>
    }
},['count']);

// Update state
setInterval(() => {
  State.set('count', State.get('count')+1);
},1000)

Example with multiple listeners and custom setState() handler

State.init({count: 0, name: 'Odjob'});

// Enhance component and listen for count updates
var Component = Enhance(
  class extends React.Component {
    render() {
      return <div>
        <h2>{ this.props.count }</h2>
        <h2>{ this.props.name }</h2>
      </div>
    }
},['count',{event: 'name', handler: (name) => {
  return `Hello Mr.${name}`
}}]);

setInterval(() => {
  State.set('count', (State.get('count')+1);
},1000)

// Update state
setTimeout(() => {
  State.set('name', 'Bond');
},1000);

State Methods

  • State.set(type, data) > this.props.[type] -> {id: type, value: data}

  • State.get(type) -> {id: type, value: data}

  • State.init(structure) -> Set initial structure

  • State.fire(event, data) -> emit event


Changelog:

1.0.0 - Api changes - Change datastructure to return only data not id and value

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published