FlickerAlerts

FlickerAlerts é uma biblioteca leve e poderosa para criar alertas e modais animados com suporte a diferentes tipos de mensagens: sucesso, erro, aviso e informações. Fácil de integrar em projetos Angular, React ou em qualquer aplicação JavaScript moderna.

---

📦 Instalação

Instale a biblioteca usando o npm:

``bash
npm install flicker-alerts
`

Se você não deseja usar o CDN para os estilos, também é possível importar o arquivo CSS diretamente do pacote instalado. Veja como configurar no Angular e no React.

---

🌍 Links Importantes

Esses links são essenciais para o funcionamento adequado dos estilos e ícones:

- Bootstrap (para estilos de layout):
`html

`

- Font Awesome (para ícones):
`html

`

- Estilo do FlickerAlerts (para os estilos da biblioteca):
`html

`

---

🚀 Uso

Após a instalação, importe a biblioteca no seu projeto e utilize a função showAlert ou showModal para criar alertas e modais.

$3

`javascript
import { FlickerAlerts, FlickerModals } from 'flicker-alerts';

FlickerAlerts.showAlert({
type: 'success', // 'success', 'info', 'warning', 'danger'
title: 'Sucesso!',
message: 'Operação realizada com sucesso.',
position: 'top-right', // Você pode usar qualquer uma das opções abaixo:
// 'top-right', 'top-left', 'bottom-right', 'bottom-left',
// 'center', 'top-center', 'bottom-center'
duration: 5000
});
`

---

🔧 Integração por Framework

$3

1. Importe e use:

`typescript
import { FlickerAlerts, FlickerModals } from 'flicker-alerts';

export class AppComponent {
showAlert() {
FlickerAlerts.showAlert({
type: 'warning',
title: 'Atenção!',
message: 'Algo deu errado.',
position: 'top-center',
duration: 5000
});
}

const showModal = () => {
FlickerModals.showModal({
type: 'delete',
title: 'Confirmação de Exclusão',
message: 'Deseja realmente excluir este item?',
onConfirm: () => {
console.log('Item deletado!');
// Exibir o alerta de sucesso após a exclusão
FlickerAlerts.showAlert({
type: 'success',
title: 'Sucesso!',
message: 'Item deletado com sucesso!',
duration: 3000 // duração do alerta
});
},
onCancel: () => {
console.log('Ação cancelada.');
}
});
};

}
`

2. Adicione os estilos ao angular.json:

Se você prefere não usar o CDN, pode configurar o Angular para importar o arquivo CSS diretamente do pacote instalado:

`json
"styles": [
"node_modules/flicker-alerts/style.css"
]
`

---

$3

1. Importe e use:

`javascript
import { FlickerAlerts, FlickerModals } from 'flicker-alerts';


const App = () => {
const showAlert = () => {
FlickerAlerts.showAlert({
type: 'info',
title: 'Informação',
message: 'Este é um alerta informativo.',
position: 'bottom-left',
duration: 5000
});
};

const showModal = () => {
FlickerModals.showModal({
type: 'delete',
title: 'Confirmação de Exclusão',
message: 'Deseja realmente excluir este item?',
onConfirm: () => {
console.log('Item deletado!');
// Exibir o alerta de sucesso após a exclusão
FlickerAlerts.showAlert({
type: 'success',
title: 'Sucesso!',
message: 'Item deletado com sucesso!',
duration: 3000 // duração do alerta
});
},
onCancel: () => {
console.log('Ação cancelada.');
}
});
};



};
`

2. Adicione os estilos manualmente no React:

Se você prefere não usar o CDN para o CSS, pode importar o arquivo diretamente do pacote no arquivo principal do React, como index.js ou App.js:

`javascript
import 'flicker-alerts/style.css';
`

Essa abordagem é recomendada para garantir que o estilo seja incluído no build final da aplicação.

---

📖 API

$3

| Propriedade | Tipo | Descrição |
|-------------|------------|------------------------------------------------|
| type | string | Tipo do alerta: success, info, warning, danger. |
| title | string | Título do alerta. |
| message | string | Mensagem do alerta. |
| position | string |Posição: top-right, top-left, bottom-right, bottom-left, center, top-center, bottom-center.|
| duration | number | Duração do alerta em milissegundos. |

---

$3

| Propriedade | Tipo | Descrição |
|---------------|------------|---------------------------------------------------|
| type | string | Tipo do modal: warning, delete. |
| title | string | Título do modal. |
| message | string | Mensagem exibida no modal. |
| onConfirm | function | Callback para execução quando confirmado. |
| onCancel | function` | Callback para execução quando cancelado. |

---

💬 Suporte

Caso tenha dúvidas ou precise de ajuda, entre em contato com o desenvolvedor no LinkedIn.

---