mobx-view-model v5.4.0
mobx-view-model
MobX ViewModel power for ReactJS
Library for integration MVVM pattern with MobX and React.
Documentation
Documentation can be found at js2me.github.io/mobx-view-model
Example
with HOC
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
}
}
const UserBadgeView = observer(({ model }: ViewModelProps<UserBadgeVM>) => (
<div className={'size-4 bg-[green]'}>
<h3>{model.user?.fullName}</h3>
{model.isAdmin && <span>admin</span>}
</div>
))
export const UserBadge = withViewModel(UserBadgeVM)(UserBadgeView);
// <UserBadge payload={{ userId: '1' }}>
with hook
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' }}>
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago