dispersive-react

Binding of dispersive for react components.

Install

This package has 2 peer dependancies : dispersive and react.

npm install dispersive react dispersive-react

Usage

import {Store} from 'dispersive';
import React, {Component} from 'react';
import {Watcher} from 'dispersive-react';

const schema = {
  name: '',
  price: 0,
};

const products = Store.createObjects({schema});

const Product = ({product}) => (
  <li className="product">
    <div className="name">{product.name}</div>
    <div className="price">{product.price}</div>
  </li>
);

const ProductList = ({products}) => (
  <ul>
    {products.map(product => (
      <Watcher sources={{product}}>
        <Product product={product} />
      </Watcher>
    ))}
  </ul>
);

class App extends Component {

  render() {
    return (
      <Watcher sources={{products}}>
        <ProductList products={products} />
      </Watcher>
    )
  }

};

export default App;

In this example, both the list and the product are observers.

So, if you type this:

products.create({name: 'ball', price: 12.5});

Then, the list will re-render.

And if you type this :

products.first().update({price: 15.25});

Then, the only the concerned Product element will re-render.