glyad / react-vvm

An MVVM implementation for React with MobX

React VVM

React VVM is a library which simplifies the usage of MobX with React by applying MVVM pattern. With this package you can create views and view models and keep the logic and presentation separately.

The library allows you to form a strict approach to development, as well as simplify the development process by taking into account the proposed approach.

Documentation

You can find the React VVM documentation on the website.

The documentation is divided into several sections:

• Getting Started
• API Description
• Examples

Examples

Here is a short example to get you started:

import { action, observable, makeObservable } from 'mobx';
import { view, ViewModel } from '@yoskutik/react-vvm';

class CounterViewModel extends ViewModel {
  @observalbe count = 0;

  constructor() {
    super();
    makeObservable(this);
  }

  @action increate = () => {
    this.count++;
  };
}

const Counter = view(CounterViewModel)(({ viewModel }) => (
  <div>
    <span>Counter: {viewModel.count}</span>
    <button onClick={() => viewModel.increate()}>increase</button>
  </div>
));

That's a basic counter example. The component consists of JSX code only. All the logic is declared in the view model. This is a fairly short example. However, the larger the component becomes, the better the benefits of the MVVM approach are seen.

We have several short examples on the website. And also there are several full-fledged examples of applications with React VVM

License

React VVM is MIT licensed.