React VVM

An implementation of MVVM for React applications with MobX

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 {
  @observable count = 0;

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

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

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

Or even simpler

You don't need to call makeObservable in each ViewModel, if you configure this package.

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

class CounterViewModel extends ViewModel {
  @observable count = 0;

  // By the way, this function is automatially memoized,
  //  so you down need to use useMemo or useCallback
  @action handleClick = () => {
    this.count++;
  };
}

const Counter = view(CounterViewModel)(({ viewModel }) => (
  <div>
    <span>Counter: {viewModel.count}</span>
    <button onClick={viewModel.handleClick}>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.