react-dispersive

1.1.0 • Public • Published

react-dispersive

Binding of dispersive for react components.

Install

This package has 2 peer dependencies : dispersive and react.

npm install dispersive react react-dispersive

Usage

import React, {Component} from 'react';
import classNames from 'classnames';
import {createModel} from 'dispersive/model';
import {withField} from 'dispersive/field';
import {createAction} from 'dispersive/action';
import {Watcher} from 'dispersive-react';
 
const Todo = createModel([
  withField('text'),  
  withField('checked'),
]);
 
const toggleTodo = createAction(todo => todo.update({checked: !todo.checked}));
const addTodo = createAction(text => Todo.objects.create({text}));
 
const TodoItem = ({todo}) => {
  const className = classNames('todo', todo.checked ? 'checked' : null);
 
  return (
    <li className={className} onClick={() => toggleTodo(todo)}>
      {todo.text}
    </li>
  );
};
 
const TodoList = () => (
  <ul className="todo-list">
    {Todo.objects.map(todo => <TodoItem todo={todo} key={todo.pk} />)}
  </ul>
);
 
class TodoForm extends Component {
 
  submit = (event) => {
    event.preventDefault();
    addTodo({text: this.input.value});
  }
 
  render() {
    return (
      <form onSubmit={submit}>
        <input ref={input => this.input = input} />
      </form>      
    );
  }
}
 
class App = () => (
  <Watcher sources={[Todo]}>
    <div className="app">
      <TodoList />
      <TodoForm />
    </div>
  </Watcher>  
);
 
export default App;

Readme

Keywords

none

Package Sidebar

Install

npm i react-dispersive

Weekly Downloads

0

Version

1.1.0

License

MIT

Last publish

Collaborators

  • dawee