https://github.com/irskep/baconreactmixin
React mixin to set component state from Bacon.js observables
https://github.com/irskep/baconreactmixin
Last synced: 3 months ago
JSON representation
React mixin to set component state from Bacon.js observables
- Host: GitHub
- URL: https://github.com/irskep/baconreactmixin
- Owner: irskep
- License: bsd-2-clause
- Created: 2014-05-16T23:02:39.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-05-19T19:02:41.000Z (over 11 years ago)
- Last Synced: 2023-04-13T11:42:26.824Z (over 2 years ago)
- Language: JavaScript
- Size: 180 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BaconReactMixin
`BaconReactMixin` sets component state from [Bacon.js](1) observables. It
depends on [React.js](2), [underscore.js](3), and Bacon.js.
[1]: https://github.com/baconjs/bacon.js
[2]: https://facebook.github.io/react/
[3]: http://underscorejs.org/
## Installation
`BaconReactMixin` can be installed as an npm package or with a `` tag.
```sh
# actually this doesn't work yet because we haven't published it.
# but you can download the tarball and use it this way.
npm install BaconReactMixin
```
```html
<script src="BaconReactMixin.js">
```
## Usage
`BaconReactMixin({key: property})` returns a mixin that sets `state[key]`
on the component whenever `property` is updated.
Properties must have initial values. If you want to use a property without
an initial value, you can just use `property.startWith(undefined)`.
Constants are also valid.
Streams may work sometimes but will not be reliable. Use `toProperty()` to
avoid problems.
## Small example
```jsx
var BaconyComponent = React.createClass({
mixins: [BaconReactMixin({
a: Bacon.constant('a'),
b: 'b'
})],
render: function() {
return
{this.state.a},
{this.state.b}
}
});
```
## Complete example
```html
BaconReactMixin demo
// update the date every second
var date = Bacon.fromPoll(
1000, function() { return new Date(); }).toProperty(new Date());
// simple component that renders date's value
var DateView = React.createClass({
mixins: [BaconReactMixin({date: date})],
render: function() {
return React.DOM.div(null, "Date: " + this.state.date);
}
})
// put the component in the page
React.renderComponent(DateView(), document.getElementById("content"));
```