Skip to content

Commit e9477ea

Browse files
committed
docs: update README
1 parent f403bcd commit e9477ea

File tree

2 files changed

+17
-9
lines changed

2 files changed

+17
-9
lines changed

.changeset/tasty-bananas-trade.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"mobx-view-model": patch
3+
---
4+
5+
update README

README.md

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Library for integration [MVVM](https://en.wikipedia.org/wiki/Model%E2%80%93view%
2323
## Documentation is [here](https://js2me.github.io/mobx-view-model/)
2424

2525

26-
_with HOC_
26+
_React's HOC approach_
2727
```tsx
2828
import { withViewModel, ViewModelBase, ViewModelProps } from "mobx-view-model";
2929
import { observer } from "mobx-react-lite";
@@ -45,21 +45,21 @@ class UserBadgeVM extends ViewModelBase<{ userId: Maybe<string> }> {
4545
}
4646
}
4747

48-
const UserBadgeView = observer(({ model }: ViewModelProps<UserBadgeVM>) => (
48+
...
49+
50+
export const UserBadge = withViewModel(UserBadgeVM, ({ model }) => (
4951
<div className={'size-4 bg-[green]'}>
5052
<h3>{model.user?.fullName}</h3>
5153
{model.isAdmin && <span>admin</span>}
5254
</div>
53-
))
54-
55-
export const UserBadge = withViewModel(UserBadgeVM)(UserBadgeView);
56-
// export const UserBadge = withViewModel(UserBadgeVM, UserBadgeView);
55+
));
5756

57+
...
5858

59-
// <UserBadge payload={{ userId: '1' }}>
59+
<UserBadge payload={{ userId: '1' }} />
6060
```
6161

62-
_with hook_
62+
_React's hook approach_
6363
```tsx
6464
import { ViewModelBase, ViewModelPayload, useCreateViewModel } from "mobx-view-model";
6565
import { observer } from "mobx-react-lite";
@@ -81,6 +81,8 @@ class UserBadgeVM extends ViewModelBase<{ userId: Maybe<string> }> {
8181
}
8282
}
8383

84+
...
85+
8486
export const UserBadge = observer(({ userId }: ViewModelPayload<UserBadgeVM>) => {
8587
const model = useCreateViewModel(UserBadgeVM, { userId });
8688

@@ -92,8 +94,9 @@ export const UserBadge = observer(({ userId }: ViewModelPayload<UserBadgeVM>) =>
9294
)
9395
})
9496

97+
...
9598

96-
// <UserBadge payload={{ userId: '1' }}>
99+
<UserBadge payload={{ userId: '1' }}/>
97100
```
98101

99102
## Contribution Guide

0 commit comments

Comments
 (0)