⚡ Clean MVVM for React + MobX | Powerful ViewModels made simple ⚡
Library for integration MVVM pattern with MobX and React.
React's HOC approach
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 } } ... 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, 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' }}/>Want to contribute ? Follow this guide