spycraft-react v0.8.13-a

spycraft-react

A small library to provide integration between React and Spooks.

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 Spooked expressions. It allows Spooks 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 Spook, Promise or plain data. The element will stay updated to the latest value of each expression.

Installation

  npm install spycraft-react --save

Usage

  // Assume React is already required.
  var spycraft = require('spycraft'),
      TimeSpook = spycraft.TimeSpook,
      spycraftreact = require('spycraft-react'),
      Rspan = spycraftreact.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 TimeSpook).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