react-or.js

react-or - ko style data binding for react

react-or provides the hooks for or to be used with react.

(see or-core)

By hooking in to react's 'componentDidMount' and 'componentWillUnmount' we track which components are mounted and only these components react to changes.

UI updates happen automatically at the highest possible granularity, because all components are rendered if and only if the data they -directly- display changes.

Create a reactive component from a function:

ReactiveComponent.create(TodoAppPure);

React-or also provides input, checkbox, radio and select components ready to be used with react and or:

BoundSelect

  let values = [{name:'boo',id:1},{name:'foo',id:2}];
  let selected = values[0]; 
<BoundSelect values={values} value={selected} optionsText="name" optionsValue="id"/>

BoundRadio

<BoundRadio value={foo()} />

BoundCheckbox

<BoundCheckbox value={foo()} />

BoundInput

<BoundInput value={foo()} />

#Example todo app

import React from 'react'
import ReactDOM from 'react-dom'
import or from 'or'
import {ReactiveComponent, BoundInput, BoundCheckbox, BoundRadio, BoundSelect} from 'react-or'

let id=0, store = {},  red = {};
const newTodo = text => { return { id:id++, text:  new or.obs(text,'text'), completed: new or.obs(false,'completed') }};
const TodoItemPure = ({todo,reducers}) => <li key={todo.id} onClick={ e => reducers.toggleTodo(todo)} style={{ textDecoration: todo.completed()?'line-through':'none' }}>{todo.text()}</li>;
const TodoItem = ReactiveComponent.create(TodoItemPure);
const TodoAppPure = ({store,reducers}) => <div>
                                            <BoundInput placeholder="type here" ds={store.newTodoText} />
                                            <button onClick={e => {reducers.addTodo(store.newTodoText());reducers.clearTodo();}}> + </button>
                                            { Object.keys(store.filters).map( k => <a key={k} onClick={ e=> reducers.changeFilter(k) } href="#"> {k} </a>  ) }
                                            <ul> {store.filteredTodos().map( todo => <TodoItem {...{todo,reducers,key:todo.id}} />)} </ul>
                                          </div> ;
const TodoApp = ReactiveComponent.create(TodoAppPure);
store.newTodoText =  new or.obs("","newTodoText");
store.todos = new or.obs([],"todos");
store.filters = {'Show All': t => true, 'Show Completed': t => t.completed(), 'Show Pending': t => !t.completed() };
store.filter = new or.obs(store.filters['Show All'],"filter");
store.filteredTodos = new or.lazycom(() =>store.todos().filter(store.filter()),"filteredTodos");
red.addTodo = text => store.todos.reduce(a => [ newTodo(text), ...a ]);
red.toggleTodo = todo =>  todo.completed.reduce(c => !c);
red.clearTodo = () => store.newTodoText.reduce(t=>'');
red.changeFilter = k => store.filter.reduce(f=>store.filters[k]);
or.begin();new Array(10).fill().map((_,i)=>red.addTodo("todo"+i));or.commit();
var e = ReactDOM.render(<div><TodoApp store={store} reducers={red} /></div>, document.getElementById('app'));