@lomray/react-mobx-manager 1.0.0-beta.9 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
|
|
2
1
|
<p align="center">
|
|
3
2
|
<img src="https://user-images.githubusercontent.com/95251720/180519123-eb8a36e7-e7af-41f2-9a01-ae6d6b6a94f3.svg" alt="Bootstrap logo" width="200" height="165">
|
|
4
3
|
</p>
|
|
5
4
|
|
|
6
5
|
<h3 align='center'>Mobx stores manager for React</h3>
|
|
7
6
|
|
|
8
|
-
[](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
|
|
9
7
|
[](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
|
|
10
8
|
[](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
|
|
11
9
|
[](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
|
|
@@ -28,7 +26,7 @@ The React-mobx-manager package is distributed using [npm](https://www.npmjs.com/
|
|
|
28
26
|
npm i --save @lomray/react-mobx-manager
|
|
29
27
|
```
|
|
30
28
|
|
|
31
|
-
Configure your bundler for keep classnames and function names in production OR use `id` for each store:
|
|
29
|
+
_Optional:_ Configure your bundler for keep classnames and function names in production OR use `id` for each store:
|
|
32
30
|
|
|
33
31
|
**React:** (craco or webpack config, terser options)
|
|
34
32
|
```bash
|
|
@@ -68,9 +66,9 @@ root.render(
|
|
|
68
66
|
);
|
|
69
67
|
```
|
|
70
68
|
|
|
71
|
-
Connect mobx store to manager and you're good to go!
|
|
69
|
+
Connect mobx store to manager, and you're good to go!
|
|
72
70
|
|
|
73
|
-
```
|
|
71
|
+
```typescript
|
|
74
72
|
import { withStores } from '@lomray/react-mobx-manager';
|
|
75
73
|
import { makeAutoObservable } from 'mobx';
|
|
76
74
|
|
|
@@ -78,6 +76,11 @@ import { makeAutoObservable } from 'mobx';
|
|
|
78
76
|
* Mobx user store
|
|
79
77
|
*/
|
|
80
78
|
class UserStore {
|
|
79
|
+
/**
|
|
80
|
+
* Required only if we don't configure our bundler for keep classnames and function names
|
|
81
|
+
*/
|
|
82
|
+
static id = 'user';
|
|
83
|
+
|
|
81
84
|
name = 'Matthew'
|
|
82
85
|
|
|
83
86
|
constructor() {
|
|
@@ -92,14 +95,13 @@ const stores = {
|
|
|
92
95
|
userStore: UserStore
|
|
93
96
|
};
|
|
94
97
|
|
|
98
|
+
// support typescript
|
|
95
99
|
type TProps = StoresType <typeof stores>;
|
|
96
100
|
|
|
97
101
|
/**
|
|
98
102
|
* User component
|
|
99
|
-
* @returns {JSX.Element}
|
|
100
|
-
* @constructor
|
|
101
103
|
*/
|
|
102
|
-
const User: FC<TProps> = ({userStore: {name}}) => {
|
|
104
|
+
const User: FC<TProps> = ({ userStore: { name } }) => {
|
|
103
105
|
return (
|
|
104
106
|
<div>{name}</div>
|
|
105
107
|
)
|
|
@@ -111,6 +113,8 @@ const User: FC<TProps> = ({userStore: {name}}) => {
|
|
|
111
113
|
export default withStores(User, stores);
|
|
112
114
|
```
|
|
113
115
|
|
|
116
|
+
[See example app](example) for more understanding.
|
|
117
|
+
|
|
114
118
|
## Bugs and feature requests
|
|
115
119
|
|
|
116
120
|
Bug or a feature request, [please open a new issue](https://github.com/Lomray-Software/react-mobx-manager/issues/new).
|