mobx-view-model

mobx-view-model

Clean MVVM for React + MobX | Powerful ViewModels made simple

Library for integration MVVM pattern with MobX and React.

Read the docs →

React's HOC approach

import { ViewModelBase } from "mobx-view-model";
import { withViewModel, ViewModelProps } from "mobx-view-model-react";
import { observer } from "mobx-react-lite";
import { action, observable } from "mobx";

class UserBadgeVM extends ViewModelBase<{ userId: Maybe<string> }> {
  private userSource = new UserSource({ abortSignal: this.unmountSignal });

  protected willMount() {
    this.userSource.connectWith(() => this.payload.userId)
  }

  get user() {
    return this.userSource.data;
  }

  get isAdmin() {
    return this.user?.isAdmin
  }
}

...

export const UserBadge = withViewModel(UserBadgeVM, ({ model }) => (
  <div className={'size-4 bg-[green]'}>
    <h3>{model.user?.fullName}</h3>
    {model.isAdmin && <span>admin</span>}
  </div>
));

...

<UserBadge payload={{ userId: '1' }} />

React's hook approach

import { ViewModelBase, ViewModelPayload } from "mobx-view-model";
import { useCreateViewModel } from "mobx-view-model-react";
import { observer } from "mobx-react-lite";
import { action, observable } from "mobx";

class UserBadgeVM extends ViewModelBase<{ userId: Maybe<string> }> {
  private userSource = new UserSource({ abortSignal: this.unmountSignal });

  protected willMount() {
    this.userSource.connectWith(() => this.payload.userId)
  }

  get user() {
    return this.userSource.data;
  }

  get isAdmin() {
    return this.user?.isAdmin
  }
}

...

export const UserBadge = observer(({ userId }: ViewModelPayload<UserBadgeVM>) => {
  const model = useCreateViewModel(UserBadgeVM, { userId });

  return (
    <div className={'size-4 bg-[green]'}>
      <h3>{model.user?.fullName}</h3>
      {model.isAdmin && <span>admin</span>}
    </div>
  )
})

...

<UserBadge payload={{ userId: '1' }}/>

Contribution Guide

Want to contribute ? Follow this guide