mobx-view-model

[![NPM version][npm-image]][npm-url] [![test status][github-test-actions-image]][github-actions-url] [![build status][github-build-actions-image]][github-actions-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]

[npm-image]: http://img.shields.io/npm/v/mobx-view-model.svg
[npm-url]: http://npmjs.org/package/mobx-view-model
[github-test-actions-image]: https://github.com/js2me/mobx-view-model/workflows/Test/badge.svg
[github-build-actions-image]: https://github.com/js2me/mobx-view-model/workflows/Build/badge.svg
[github-actions-url]: https://github.com/js2me/mobx-view-model/actions
[download-image]: https://img.shields.io/npm/dm/mobx-view-model.svg
[download-url]: https://npmjs.org/package/mobx-view-model
[bundlephobia-url]: https://bundlephobia.com/result?p=mobx-view-model
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/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_
``tsx 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 }> { 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 }) => (


    {model.user?.fullName}

    {model.isAdmin && admin}


));
...

_React's hook approach_`tsx 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 }> { 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) => { const model = useCreateViewModel(UserBadgeVM, { userId });

return (


      {model.user?.fullName}

      {model.isAdmin && admin}


  )
})
...

Contribution Guide

Want to contribute ? Follow this guide

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_
``tsx 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 }> { 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 }) => (


    {model.user?.fullName}

    {model.isAdmin && admin}


));
...

class UserBadgeVM extends ViewModelBase<{ userId: Maybe }> { 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) => { const model = useCreateViewModel(UserBadgeVM, { userId });

return (


      {model.user?.fullName}

      {model.isAdmin && admin}


  )
})
...

Contribution Guide

Want to contribute ? Follow this guide