izaakschroeder / react-observer

ES7's Observable with React components.

react-observer

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.

TODO

• Tests
• Runnable examples
• Incorporate invariant

Usage

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