How to use the mobservable.reactiveComponent function in mobservable

To help you get started, we’ve selected a few mobservable examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mobxjs / mobx-react-boilerplate / src / components.js View on Github external
<button>New Todo</button>
			<button>Load more...</button>
		);
	},

	onNewTodo: function() {
		this.props.store.addTodo(prompt('Enter a new todo:', 'Try mobservable at home!'));
	},

	loadMore: function() {
		this.props.store.loadTodosAsync();
	}
}));

// React component that responds to changes in its 'todo'
var TodoView = reactiveComponent(React.createClass({
	displayName: 'TodoView',

	render: function() {
		var todo = this.props.todo;
		return (<li>
			<input checked="{" type="checkbox">
			{todo.title}{' '}
			<a href="#">[edit]</a>
			<a href="#">[remove]</a>
		</li>);
	},

	onToggleCompleted: function() {
		this.props.todo.completed = !this.props.todo.completed;
	},
github mobxjs / mobx-react-boilerplate / src / components.js View on Github external
import React from 'react';
import {reactiveComponent} from 'mobservable';

// React component that responds to changes in 'todos'
export var TodoList = reactiveComponent(React.createClass({
	displayName: 'TodoList',

	render: function() {
		var store = this.props.store;
		return (<div>
			<ul>
				{ store.todos.map((todo, idx) =&gt;
					()
				) }
				{ store.pending ? (<li>Loading more items...</li>) : null }
			</ul>
			<hr>
			Completed { store.completedCount } of { store.todos.length } items.<br>
			<button>New Todo</button>
			<button>Load more...</button>
		</div>);
github dschalk / websockets-react / client / B3.jsx View on Github external
display: hideParamsButton, paddingTop: 1.1, paddingBottom: 0.9, marginRight: 3, marginLeft: 12, fontSize: 20, borderColor: 'red' }} 
            onMouseEnter={() =&gt; {this.mouse[25] = 'blue'}} onMouseLeave={() =&gt; {this.mouse[25] = '#000' }} &gt;
          Shrink Parameters
        
        
     

    <div style="{{paddingBottom:">
  </div>
    )}
  };

reactMixin(B2X.prototype, require('./node_modules/react/lib/AutoFocusMixin'));
B2X.defaultProps = {key: 'B2X'};

let B2 = mobservable.reactiveComponent(B2X);
React.render(, document.getElementById('divSix'));