@cloudoperators/juno-messages-provider 0.1.16 → 0.1.17
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 +13 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,12 +12,12 @@ This lib uses a **context** store based on Zustand to manage the messages. That
|
|
|
12
12
|
|
|
13
13
|
In order to run this library in your application you need to install also following libraries which are not included in the bundle:
|
|
14
14
|
|
|
15
|
-
- juno-ui-components, recommended version ^2.14.1
|
|
15
|
+
- @cloudoperators/juno-ui-components, recommended version ^2.14.1
|
|
16
16
|
- react, recommended version 18.2.0
|
|
17
17
|
- zustand, recommended version ^4.5.2
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
|
-
yarn add zustand@4.5.2, react@18.2.0
|
|
20
|
+
yarn add zustand@4.5.2, react@18.2.0 @cloudoperators/juno-ui-components
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
|
@@ -25,14 +25,14 @@ yarn add zustand@4.5.2, react@18.2.0 https://assets.juno.global.cloud.sap/libs/j
|
|
|
25
25
|
1. Import this lib
|
|
26
26
|
|
|
27
27
|
```bash
|
|
28
|
-
yarn add
|
|
28
|
+
yarn add @cloudoperators//messages-provider
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
2. Add the message **MessagesProvider**. Normally it is set on the top of your application so you can use it from everywhere underneath.
|
|
32
32
|
|
|
33
33
|
```javascript
|
|
34
34
|
import React from "react"
|
|
35
|
-
import { MessagesProvider } from "messages-provider"
|
|
35
|
+
import { MessagesProvider } from "@cloudoperators/messages-provider"
|
|
36
36
|
import AppContent from "./AppContent"
|
|
37
37
|
|
|
38
38
|
const App = (props) => {
|
|
@@ -50,7 +50,7 @@ yarn add zustand@4.5.2, react@18.2.0 https://assets.juno.global.cloud.sap/libs/j
|
|
|
50
50
|
|
|
51
51
|
```javascript
|
|
52
52
|
import React from "react"
|
|
53
|
-
import { Messages } from "messages-provider"
|
|
53
|
+
import { Messages } from "@cloudoperators/messages-provider"
|
|
54
54
|
import AppContent from "./AppContent"
|
|
55
55
|
|
|
56
56
|
const AppContent = (props) => {
|
|
@@ -67,7 +67,7 @@ yarn add zustand@4.5.2, react@18.2.0 https://assets.juno.global.cloud.sap/libs/j
|
|
|
67
67
|
|
|
68
68
|
```javascript
|
|
69
69
|
import React from "react"
|
|
70
|
-
import { useActions, Messages } from "messages-provider"
|
|
70
|
+
import { useActions, Messages } from "@cloudoperators/messages-provider"
|
|
71
71
|
|
|
72
72
|
const AppContent = (props) => {
|
|
73
73
|
const { addMessage } = useActions()
|
|
@@ -97,7 +97,7 @@ This is the case when you want to manage and display the messages in different l
|
|
|
97
97
|
|
|
98
98
|
```javascript
|
|
99
99
|
import React from "react"
|
|
100
|
-
import { MessagesProvider } from "messages-provider"
|
|
100
|
+
import { MessagesProvider } from "@cloudoperators/messages-provider"
|
|
101
101
|
import NewItemForm from "./NewItemForm"
|
|
102
102
|
import { Panel } from "@cloudoperators/juno-ui-components"
|
|
103
103
|
|
|
@@ -118,7 +118,7 @@ Within the NewItemForm component all actions will be handled bei the first `pare
|
|
|
118
118
|
|
|
119
119
|
```javascript
|
|
120
120
|
import React from "react"
|
|
121
|
-
import { useActions, Messages } from "messages-provider"
|
|
121
|
+
import { useActions, Messages } from "@cloudoperators/messages-provider"
|
|
122
122
|
import { PanelBody } from "@cloudoperators/juno-ui-components"
|
|
123
123
|
|
|
124
124
|
const NewItemForm = (props) => {
|
|
@@ -148,7 +148,7 @@ export default NewItemForm
|
|
|
148
148
|
- **messages**: return all messages int the store
|
|
149
149
|
|
|
150
150
|
```javascript
|
|
151
|
-
import { useMessages } from "messages-provider"
|
|
151
|
+
import { useMessages } from "@cloudoperators/messages-provider"
|
|
152
152
|
...
|
|
153
153
|
const messages = useMessages()
|
|
154
154
|
...
|
|
@@ -159,7 +159,7 @@ export default NewItemForm
|
|
|
159
159
|
- **messages**: return all messages int the store
|
|
160
160
|
|
|
161
161
|
```javascript
|
|
162
|
-
import { useMessageStore } from "messages-provider"
|
|
162
|
+
import { useMessageStore } from "@cloudoperators/messages-provider"
|
|
163
163
|
...
|
|
164
164
|
const messages = useMessageStore((state) => state.messages)
|
|
165
165
|
...
|
|
@@ -174,7 +174,7 @@ export default NewItemForm
|
|
|
174
174
|
Returns the message id if succeed otherwise null.
|
|
175
175
|
|
|
176
176
|
```javascript
|
|
177
|
-
import { useActions } from "messages-provider"
|
|
177
|
+
import { useActions } from "@cloudoperators/messages-provider"
|
|
178
178
|
...
|
|
179
179
|
const { addMessage } = useActions()
|
|
180
180
|
...
|
|
@@ -189,7 +189,7 @@ export default NewItemForm
|
|
|
189
189
|
Accepts a paremeter containing the id as string from the message to remove.
|
|
190
190
|
|
|
191
191
|
```javascript
|
|
192
|
-
import { useActions } from "messages-provider"
|
|
192
|
+
import { useActions } from "@cloudoperators/messages-provider"
|
|
193
193
|
...
|
|
194
194
|
const { removeMessage } = useActions()
|
|
195
195
|
...
|
|
@@ -200,7 +200,7 @@ export default NewItemForm
|
|
|
200
200
|
- **resetMessages**: removes all messages in the store
|
|
201
201
|
|
|
202
202
|
```javascript
|
|
203
|
-
import { useActions } from "messages-provider"
|
|
203
|
+
import { useActions } from "@cloudoperators/messages-provider"
|
|
204
204
|
...
|
|
205
205
|
const { resetMessages } = useActions()
|
|
206
206
|
...
|