oo7-react

A small library to provide integration between React and Bonds.

Provides the Reactive base component ReactiveComponent and a number of convenience components derived from it Reactive. The first provides an alternative to React.Component for classes whose state shall depend on Bonded expressions. It allows Bonds and Promises and plain data to be passed in as one or more named props (the names are passed in the constructor) or explicitly as fields in the constructors. In both cases, these reactive values show up as plain values of the same name in this.state.

Rspan is an alternative to span but allows you to provide reactive values rather than plain data. For the child element, className and id props, the value can be a Bond, Promise or plain data. The element will stay updated to the latest value of each expression.

Installation

  npm install oo7-react --save

Usage

  // Assume React is already required.
  var oo7 = require('oo7'),
      TimeBond = oo7.TimeBond,
      oo7react = require('oo7-react'),
      Rspan = oo7react.Rspan;

  class DateFormatter extends ReactiveComponent {
	  constructor() {
		  // Tell the object to look out for 'date' prop and keep the 'date'
		  // state up to date.
		  super(['date']);
	  }
	  render() {
		  return this.state.date === null ?
		    <div>Date unknown</div> :
		    <div>The date is {this.state.date}</div>;
	  }
  }

  class App extends React.Component {
	  render() {
		  // Evaluates to a pretty datetime.
		  let b = (new TimeBond).map(t => new Date(t) + '');
		  // Prints two clocks. They both print the time and stay up to date.
		  return (<div>
			  <DateFormatter date={b} />
			  <div>The date is: <Rspan>{b}</Rspan></div>
			</div>)
	  }
  }

Tests

  npm test

Contributing

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

Release History

• 0.4.0 Remove material-ui dependency
• 0.1.2 Add components
• 0.1.1 Initial release