flicker-alerts 1.0.25 → 1.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/index.js +2 -1
- package/package.json +4 -4
- package/readme.md +31 -8
- package/style.css +0 -7
package/index.js
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "flicker-alerts",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.26",
|
4
4
|
"description": "Biblioteca para alertas animados",
|
5
5
|
"main": "index.js",
|
6
6
|
"types": "index.d.ts",
|
@@ -13,9 +13,9 @@
|
|
13
13
|
"javascript",
|
14
14
|
"notificações"
|
15
15
|
],
|
16
|
-
"author": "",
|
16
|
+
"author": "https://www.linkedin.com/in/bruno-carneiro-9a51aa190/",
|
17
17
|
"license": "MIT",
|
18
18
|
"dependencies": {
|
19
|
-
"flicker-alerts": "^1.0.
|
19
|
+
"flicker-alerts": "^1.0.26"
|
20
20
|
}
|
21
|
-
}
|
21
|
+
}
|
package/readme.md
CHANGED
@@ -1,6 +1,5 @@
|
|
1
1
|
|
2
2
|
# FlickerAlerts
|
3
|
-
[Bruno Carneiro - LinkedIn](https://www.linkedin.com/in/bruno-carneiro-9a51aa190/)
|
4
3
|
|
5
4
|
**FlickerAlerts** é uma biblioteca simples para criar alertas animados de sucesso, erro, aviso e informações. Eles podem ser exibidos automaticamente ou ser fechados manualmente pelo usuário.
|
6
5
|
|
@@ -100,18 +99,42 @@ Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React as
|
|
100
99
|
```javascript
|
101
100
|
import FlickerAlerts from 'flicker-alerts';
|
102
101
|
|
103
|
-
|
104
|
-
|
105
|
-
FlickerAlerts.showAlert({
|
102
|
+
const showSucessAlert = () => {
|
103
|
+
FlickerAlerts.showAlert({
|
106
104
|
type: 'success',
|
107
105
|
title: 'Sucesso',
|
108
|
-
message: 'Operação concluída com sucesso!'
|
109
|
-
position: 'top-
|
110
|
-
|
106
|
+
message: 'Operação concluída com sucesso!',
|
107
|
+
position: 'top-right'
|
108
|
+
});
|
109
|
+
};
|
110
|
+
|
111
|
+
|
112
|
+
const showInfoAlert = () => {
|
113
|
+
FlickerAlerts.showAlert({
|
114
|
+
type: 'info',
|
115
|
+
title: 'Informação',
|
116
|
+
message: 'Aqui está uma informação importante.',
|
117
|
+
position: 'top-right'
|
111
118
|
});
|
112
119
|
};
|
113
|
-
}
|
114
120
|
|
121
|
+
const showWarningAlert = () => {
|
122
|
+
FlickerAlerts.showAlert({
|
123
|
+
type: 'warning',
|
124
|
+
title: 'Alerta',
|
125
|
+
message: 'Por favor, preste atenção nisso!',
|
126
|
+
position: 'top-right'
|
127
|
+
});
|
128
|
+
};
|
129
|
+
|
130
|
+
const showErrorAlert = () => {
|
131
|
+
FlickerAlerts.showAlert({
|
132
|
+
type: 'danger',
|
133
|
+
title: 'Erro',
|
134
|
+
message: 'Ocorreu um erro inesperado!',
|
135
|
+
position: 'top-right'
|
136
|
+
});
|
137
|
+
};
|
115
138
|
|
116
139
|
|
117
140
|
```
|
package/style.css
CHANGED
@@ -1,10 +1,3 @@
|
|
1
|
-
/* Importando o Bootstrap */
|
2
|
-
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
|
3
|
-
|
4
|
-
/* Importando o Font Awesome */
|
5
|
-
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
|
6
|
-
|
7
|
-
|
8
1
|
/* Estilo geral para o alerta */
|
9
2
|
.alert-custom {
|
10
3
|
display: flex;
|