FlickerAlerts

Para suporte, entre em contato pelo LinkedIn.

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:

npm install flicker-alerts

🌍 Links Importantes

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

• Bootstrap (para estilos de layout): <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
• Font Awesome (para ícones): <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
• Estilo do FlickerAlerts: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flicker-alerts/style.css">

🚀 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.

Exemplo Básico de Alerta:

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

Angular

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 
    });
  }

  showModal() {
    FlickerModals.showModal({
      type: 'warning',
      title: 'Confirmação',
      message: 'Deseja realmente continuar?',
      onConfirm: () => {
        console.log('Confirmado!');
        // Exibir o alerta de sucesso após a confirmação
        FlickerAlerts.showAlert({
          type: 'success',
          title: 'Sucesso!',
          message: 'Ação confirmada com sucesso!',
          duration: 3000 // duração do alerta
        });
      },
      onCancel: () => {
        console.log('Cancelado!');
      }
    });
  }
  
        

React

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.');
      }
    });
  };
  

export default App;
        

FlickerAlerts.showAlert(config)

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 do alerta na tela: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center', 'bottom-center'.

FlickerModals.showModal(config)

Propriedade	Tipo	Descrição
type	string	Tipo do modal: 'warning', 'delete'.
title	string	Título do modal.
message	string	Mensagem do modal.
onConfirm	function	Função executada quando o usuário confirma.
onCancel	function	Função executada quando o usuário cancela.