Getting started

The mobx-view-model source code is written on TypeScript and compiled into NodeNext target.

Requirements

• MobX 6+

Installation

npm

npm install mobx-view-model

yarn

yarn add mobx-view-model

pnpm

pnpm add mobx-view-model

Writing first ViewModels

import { observable } from 'mobx';
import { ViewModelBase } from 'mobx-view-model';

class PetCardVM extends ViewModelBase {
  @observable
  accessor petName: string = '';

  @action.bound
  setPetName(petName: string) {
    this.petName = petName;
  }
}

Integration with React

import { observer } from "mobx-react-lite";
import { withViewModel, ViewModelProps } from "mobx-view-model";
import { PetCardVM } from "./model";

const PetCardView = observer(({ model }: ViewModelProps<PetCardVM>) => {

  return (
    <div className="p-10 flex flex-col gap-3">
      <span>{`Pet name: ${model.petName}`}</span>
      <input
        placeholer="name"
        value={model.petName}
        onChange={e => {
          model.setPetName(e.target.value);
        }}
      />
    </div> 
  )
})

export const PetCard = withViewModel(PetCardVM)(PetCardView)

...
<PetCard />