@@ -23,7 +23,7 @@ Library for integration [MVVM](https://en.wikipedia.org/wiki/Model%E2%80%93view%
23
23
## Documentation is [ here] ( https://js2me.github.io/mobx-view-model/ )
24
24
25
25
26
- _ with HOC _
26
+ _ React's HOC approach _
27
27
``` tsx
28
28
import { withViewModel , ViewModelBase , ViewModelProps } from " mobx-view-model" ;
29
29
import { observer } from " mobx-react-lite" ;
@@ -45,21 +45,21 @@ class UserBadgeVM extends ViewModelBase<{ userId: Maybe<string> }> {
45
45
}
46
46
}
47
47
48
- const UserBadgeView = observer (({ model }: ViewModelProps <UserBadgeVM >) => (
48
+ ...
49
+
50
+ export const UserBadge = withViewModel (UserBadgeVM , ({ model }) => (
49
51
<div className = { ' size-4 bg-[green]' } >
50
52
<h3 >{ model .user ?.fullName } </h3 >
51
53
{ model .isAdmin && <span >admin</span >}
52
54
</div >
53
- ))
54
-
55
- export const UserBadge = withViewModel (UserBadgeVM )(UserBadgeView );
56
- // export const UserBadge = withViewModel(UserBadgeVM, UserBadgeView);
55
+ ));
57
56
57
+ ...
58
58
59
- // <UserBadge payload={{ userId: '1' }}>
59
+ <UserBadge payload = { { userId: ' 1' }} / >
60
60
```
61
61
62
- _ with hook _
62
+ _ React's hook approach _
63
63
``` tsx
64
64
import { ViewModelBase , ViewModelPayload , useCreateViewModel } from " mobx-view-model" ;
65
65
import { observer } from " mobx-react-lite" ;
@@ -81,6 +81,8 @@ class UserBadgeVM extends ViewModelBase<{ userId: Maybe<string> }> {
81
81
}
82
82
}
83
83
84
+ ...
85
+
84
86
export const UserBadge = observer (({ userId }: ViewModelPayload <UserBadgeVM >) => {
85
87
const model = useCreateViewModel (UserBadgeVM , { userId });
86
88
@@ -92,8 +94,9 @@ export const UserBadge = observer(({ userId }: ViewModelPayload<UserBadgeVM>) =>
92
94
)
93
95
})
94
96
97
+ ...
95
98
96
- // <UserBadge payload={{ userId: '1' }}>
99
+ <UserBadge payload = { { userId: ' 1' }} / >
97
100
```
98
101
99
102
## Contribution Guide
0 commit comments