https://github.com/dawee/react-dispersive

React binding for Dispersive
https://github.com/dawee/react-dispersive

Last synced: 3 months ago
JSON representation

React binding for Dispersive

• Host: GitHub
• URL: https://github.com/dawee/react-dispersive
• Owner: dawee
• Created: 2016-10-25T13:04:34.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-19T21:23:00.000Z (over 9 years ago)
• Last Synced: 2025-10-20T04:49:55.441Z (9 months ago)
• Language: JavaScript
• Size: 38.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-dispersive

Binding of [dispersive](http://github.com/dawee/dispersive) for [react](http://github.com/facebook/react) components.

## Install

This package has 2 peer dependencies : [dispersive](http://github.com/dawee/dispersive) and [react](http://github.com/facebook/react).

```sh

npm install dispersive react react-dispersive

```

## Usage

```jsx

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 (

    
 toggleTodo(todo)}>

      {todo.text}

    

  );

};


const TodoList = () => (

  


    {Todo.objects.map(todo => )}

  

);


class TodoForm extends Component {

  submit = (event) => {

    event.preventDefault();

    addTodo({text: this.input.value});

  }

  render() {

    return (

      

         this.input = input} />

            

    );

  }

}

class App = () => (

  

    


      

      

    

    

);


export default App;

```