flicker-alerts 1.0.25 → 1.0.27

Sign up to get free protection for your applications and to get access to all the features.
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.27",
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.27"
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,19 +99,47 @@ 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'
106
+ message: 'Operação concluída com sucesso!',
107
+ position: 'top-right'
110
108
  // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
111
109
  });
112
110
  };
113
- }
114
111
 
115
112
 
113
+ const showInfoAlert = () => {
114
+ FlickerAlerts.showAlert({
115
+ type: 'info',
116
+ title: 'Informação',
117
+ message: 'Aqui está uma informação importante.',
118
+ position: 'top-right'
119
+ // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
120
+ });
121
+ };
122
+
123
+ const showWarningAlert = () => {
124
+ FlickerAlerts.showAlert({
125
+ type: 'warning',
126
+ title: 'Alerta',
127
+ message: 'Por favor, preste atenção nisso!',
128
+ position: 'top-right'
129
+ // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
130
+ });
131
+ };
132
+
133
+ const showErrorAlert = () => {
134
+ FlickerAlerts.showAlert({
135
+ type: 'danger',
136
+ title: 'Erro',
137
+ message: 'Ocorreu um erro inesperado!',
138
+ position: 'top-right'
139
+ // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
140
+ });
141
+ };
142
+
116
143
 
117
144
  ```
118
145
 
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;