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 CHANGED
@@ -1,4 +1,5 @@
1
- import './style.css'; // Certifique-se de usar o caminho certo aqui
1
+
2
+ import './style.css';
2
3
 
3
4
 
4
5
  const FlickerAlerts = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flicker-alerts",
3
- "version": "1.0.25",
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.25"
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
- function App() {
104
- const showSuccessAlert = () => {
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-righ'
110
- // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
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;