spycraft-react
v0.8.13-a
Published
The Reactive Spook API
Downloads
15
Maintainers
Readme
spycraft-react
A small library to provide integration between React and Spook
s.
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 Spook
ed expressions. It allows Spook
s and Promise
s
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