react-data-binding@0.4.1

do react data binding easily

/* eslint react/no-multi-comp:0 */

import {createContainer as container, createRootContainer as rootContainer} from 'react-data-binding';
import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import autobind from 'autobind-decorator';

@container({
  // specify data need to be concerned
  myUser: 'user',
})
class User extends Component {
  static propTypes = {
    myUser: PropTypes.object,
    setStoreState: PropTypes.func,
  }

  @autobind
  onClick(e) {
    e.preventDefault();
    // trigger re render
    this.props.setStoreState({
      // better use immutable.js
      user: {
        name: 'updated: ' + Date.now(),
      },
    });
  }

  render() {
    return (<a href="#" onClick={this.onClick}>{this.props.myUser.name}</a>);
  }
}

@rootContainer({
  // initial app data
  user: {
    name: 'initial',
  },
})
class App extends React.Component {
  render() {
    return <User/>;
  }
}

ReactDOM.render(<App />, document.getElementById('__react-content'));
Fork me on GitHub