Getting started

The mobx-view-model source code is written in TypeScript and compiled with the NodeNext module target.

Requirements

• MobX ^6
• React ^18|^19 is required for the React integration

Installation

npm

npm install {packageJson.name}

pnpm

pnpm add {packageJson.name}

yarn

yarn add {packageJson.name}

Writing your first ViewModel

import { action, 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-react";
import { PetCardVM } from "./model";

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

...
<PetCard />