Pkg Stats

import React from 'react';
import ReactDOM from 'react-dom';
import { Bind, observable } from '@jishida/react-mvvm';

const count = observable(0);

function increment() {
  count.value += 1;
}

ReactDOM.render(
  <Bind $type='button' onClick={increment}>
    increment: {count}
  </Bind>,
  document.getElementById('root')
);

The monitored variable manages its state through an Observable object created from the observable function. Bind component monitors Observable objects passed via props, resolves Observable objects to the component passed in $type prop, then passes the value. Bind component will be re-rendered when Observable objects passed via props is modified or whose notify method is called.

ViewModel Example

The minimal example is concise, but react-mvvm recommends that you classify states and actions as ViewModel.

import React from 'react';
import ReactDOM from 'react-dom';
import { Bind, observable, proxy } from '@jishida/react-mvvm';

class IncrementViewModel {
  count = observable(0);

  // proxy function needs to be called after the Observable bject has been created.
  state = proxy<IncrementViewModel>(this, 'state');

  increment = () => {
    this.state.count += 1;
  }
}

const store = new IncrementViewModel();

ReactDOM.render(
  <Bind $type='button' onClick={store.increment}>
    increment: {store.count}
  </Bind>,
  document.getElementById('root')
);

Direct access to members of Observable objects such as value property is not intuitive and the code does not look good. Therefore, this library recommends using proxy function. proxy function provides six built-in proxies: 'ref', 'value', 'state', 'result', 'error' and 'message'. Those properties are type-safe and can be complemented by IntelliSense, making it more comfortable to code with typescript.

Re-render Optimization Example

Bind component will be re-rendered when there are changes to the Observable object received from props. It would be easier to understand this Stopwatch Example Demo if you enable the "Highlight updates when components render." option in React Developper Tools. Only components that need to be updated will be re-rendered.

Material-UI Form Example

The Observable object can optionally have additional features.