@edinelsonslima/toast-notification 0.0.24 → 0.0.26
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 +15 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
## ⤵️ Instalando
|
|
4
4
|
|
|
5
|
+
Adicionar com **yarn**
|
|
5
6
|
```
|
|
6
7
|
yarn add @edinelsonslima/toast-notification
|
|
7
8
|
```
|
|
9
|
+
Adicionar com **npm**
|
|
8
10
|
```
|
|
9
11
|
npm install @edinelsonslima/toast-notification
|
|
10
12
|
```
|
|
@@ -36,7 +38,7 @@ import { toast } from '@edinelsonslima/toast-notification';
|
|
|
36
38
|
export default function MyComponent(){
|
|
37
39
|
//seu código
|
|
38
40
|
|
|
39
|
-
const
|
|
41
|
+
const exampleToast = () => {
|
|
40
42
|
toast.success({ text: "Mensagem de exemplo" })
|
|
41
43
|
}
|
|
42
44
|
|
|
@@ -48,44 +50,47 @@ export default function MyComponent(){
|
|
|
48
50
|
|
|
49
51
|
## 🧐 Informações adicionais
|
|
50
52
|
|
|
53
|
+
|
|
54
|
+
#### O que é disponível com o pacote
|
|
51
55
|
| função | propriedades |
|
|
52
56
|
|--------------------|------------------------------------------------------------|
|
|
53
57
|
| ToastContainer | `classNames` `position` |
|
|
54
58
|
| toast | `text` `type` `duration` |
|
|
59
|
+
| style | `/dist/style.css` |
|
|
55
60
|
|
|
56
|
-
|
|
61
|
+
#### As propriedades da função toast
|
|
62
|
+
|propriedade | toast |
|
|
57
63
|
|--------------------|----------------------------------------------------------- |
|
|
58
64
|
| text | A mensagem que aparecerá dentro do toast |
|
|
59
65
|
| type | Define o tipo de toast que é para aparecer |
|
|
60
66
|
| duration | O tempo que o toast irá permanecer em tela |
|
|
61
67
|
|
|
62
|
-
|
|
68
|
+
#### As propriedades do componente ToastContainer
|
|
69
|
+
|propriedade | ToastContainer |
|
|
63
70
|
|--------------------|----------------------------------------------------------- |
|
|
64
71
|
| classNames | Um objeto de **chave:valor** onde a chave é o tipo de toast e o valor pode ser uma string (classNames) ou um objeto (CSSProperties) |
|
|
65
72
|
| position | Define em qual parte da tela irá aparecer a toast notification, existe valores predefinidos |
|
|
66
73
|
|
|
67
|
-
|
|
68
|
-
|
|
74
|
+
#### Mais detalhes sobre as propriedades
|
|
69
75
|
| propriedade |tipo | é obrigatório | padrão |
|
|
70
76
|
|-------------|-------|-----------------|-------------|
|
|
71
77
|
| text |string | sim | - |
|
|
72
|
-
| type |string | sim | - |
|
|
78
|
+
| type |string | sim | - |
|
|
73
79
|
| duration |number | não | 7_0000 |
|
|
74
80
|
| classNames |object | não | undefined |
|
|
75
81
|
| position |string | não | right-top |
|
|
76
82
|
|
|
77
|
-
ℹ️ O `
|
|
78
|
-
|
|
83
|
+
ℹ️ O `duration` está em ms (milissegundos)
|
|
79
84
|
|
|
80
85
|
ℹ️ A função `toast` pode ser chamada de duas forma, veja os exemplos a seguir:
|
|
81
86
|
|
|
82
87
|
caso seja chamada direta, será obrigatório informa o **type**
|
|
83
88
|
```ts
|
|
84
|
-
toast({ text: "mensagem exemplo", type: "info",
|
|
89
|
+
toast({ text: "mensagem exemplo", type: "info", duration: 1000 * 4 })
|
|
85
90
|
```
|
|
86
91
|
ou pode acessar o tipo do toast diretamente, assim omitindo ele do objeto enviado
|
|
87
92
|
```ts
|
|
88
|
-
toast.info({ text: "mensagem exemplo",
|
|
93
|
+
toast.info({ text: "mensagem exemplo", durantino: 1000 * 4 })
|
|
89
94
|
```
|
|
90
95
|
|
|
91
96
|
|