react-plunge v0.0.1

React Plunge

NOT IMPLIMENTED YET: See Plunge for more info on that.

React Plunge is a High Order Function that binds store like data to a component as props. State is preserved within the React Plunge Component

TODO

• Get the proof of concept working.
• Write tests around the component.
• Get an example up and running.

Install

npm install react-plunge

Usage

'use strict';
import React from 'react';
import plunge from 'react-plunge';

class Index extends React.Component {
  _onClick() {
    this.props.ApiData.store.add({
      clicks: this.props.ApiData.data.clicks + 1
    });
  }

  render() {
    let clicks = this.props.ApiData.data.clicks;
    let text = clicks == 1 ? 'Beer' : 'Beers';

    return (
      <div styles={[ LayoutStyle.center, LayoutStyle.half, styles.container ]}>
        <div styles={styles.number}>
          {clicks} {text} Donated
        </div>
        <button type='text' onClick={this._onClick.bind(this)} value='Donate a beer'/>
      </div>
    );
  }
}

let ApiData = {
  name: 'ApiData',
  uri: '/api/data',
  data: {
    clicks: 0
  }
};

export default plunge(Index, [ApiData]);