mobx-view-model

MobX ViewModel power for ReactJS

Library for integration MVVM pattern with MobX and React.

Documentation is here

with HOC

import { withViewModel, ViewModelBase, ViewModelProps } from "mobx-view-model";
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 });

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

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

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

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

export const UserBadge = withViewModel(UserBadgeVM)(UserBadgeView);


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

with hook

import { ViewModelBase, ViewModelPayload, useCreateViewModel } from "mobx-view-model";
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 });

  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' }}>