https://github.com/js2me/mobx-view-model
⚡ Clean MVVM for React + MobX | Powerful ViewModels made simple ⚡
https://github.com/js2me/mobx-view-model
mobx mobx-react mobx-view mobx-view-model mvvm view-model
Last synced: about 1 month ago
JSON representation
⚡ Clean MVVM for React + MobX | Powerful ViewModels made simple ⚡
- Host: GitHub
- URL: https://github.com/js2me/mobx-view-model
- Owner: js2me
- License: mit
- Created: 2024-07-19T19:53:01.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2026-04-13T22:45:47.000Z (about 1 month ago)
- Last Synced: 2026-04-13T23:34:16.759Z (about 1 month ago)
- Topics: mobx, mobx-react, mobx-view, mobx-view-model, mvvm, view-model
- Language: TypeScript
- Homepage: https://js2me.github.io/mobx-view-model/
- Size: 14.3 MB
- Stars: 13
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel) pattern with [MobX](https://mobx.js.org/README.html) and [React](https://react.dev/).
## [Read the docs →](https://js2me.github.io/mobx-view-model/)
_React's HOC approach_
```tsx
import { ViewModelBase } from "mobx-view-model";
import { withViewModel, ViewModelProps } from "mobx-view-model-react";
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 } from "mobx-view-model";
import { useCreateViewModel } from "mobx-view-model-react";
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](https://github.com/js2me/mobx-view-model/blob/master/CONTRIBUTING.md)