paritytech/oo7-react

Name: oo7-react

Owner: Parity Technologies

Description: The Reactive Bond API

Created: 2017-01-26 14:58:49.0

Updated: 2017-12-08 10:38:13.0

Pushed: 2017-11-02 20:36:13.0

Homepage: null

Size: 164

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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

m install oo7-react --save

Usage

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

ass 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>;
  }


ass 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

m 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