Respond to most events in React components.
Make React actually reactive.
This one is fairly specific to most right now - ideally it should support the ES7 observable interface, but this works. See the discussion here.
- Tests
- Runnable examples
- Incorporate
invariant
Use it on DOM elements.
import observer from 'react-observer';
import { fromEvent, map } from 'most';
@observer
class MyComponent extends Component {
observe(props) {
return {
mouse: map((ev) => {
return { x: ev.clientX, y: ev.clientY };
}, fromEvent('mousedown', document))
};
}
render() {
<div>Position: ({this.mouse.x},{this.mouse.y})</div>
}
}
Use it with afflux.
import observer from 'react-observer';
import { fromEvent, map } from 'most';
@observer
class MyComponent extends Component {
observe(props) {
return {
user: this.stores.users.current
};
}
render() {
<div>User: {this.user.name}</div>
}
}
Use it to make simple timers.
import observer from 'react-observer';
import { create } from 'most';
@observer
class MyComponent extends Component {
observe(props) {
return {
time: create(add => {
const interval = setInterval(() => {
add(new Date());
}, 1000);
return () => { clearInterval(interval); };
})
};
}
render() {
<div>It is now: {this.time}</div>
}
}