mobx-deku

Package with deku component wrapper for combining deku with mobx. Exports the observer function decorator. For documentation, see the mobx project.

npm install mobx-deku

Boilerplate Projects that use mobx-deku

• Minimal MobX, deku, ES6, JSX, Hot reloading: mobx-deku-boilerplate

API documentation

observer(component)

Function that converts a Deku component definition or stand-alone render function into a reactive component. See the mobx documentation for more details.

import {observer} from "mobx-deku";

const TodoView = observer({
    render({props}) {
        return <div>{props.todo.title}</div>
    }
}));

Full Example

import {render, tree} from 'deku';
import element from 'magic-virtual-element';
import {observable} from 'mobx';
import {observer} from 'mobx-deku';

class AppState {
  @observable counter = 0;
  increaseCounter () {
    this.counter += 1;
  }
}
const appState = new AppState();

const App = observer({
  render ({props}) {
    return (
      <div>
        <div class='app'>{props.appState.counter}</div>
        <button onClick={onClick}>+</button>
      </div>
    );
    function onClick () {
      props.appState.increaseCounter();
    }
  }
});

render(tree(<App appState={appState} />), document.createElement('div'));

Special thanks to mobx-react and @mattmccray's gist