flicker-alerts v1.0.84

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

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):

  <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 (para os estilos da biblioteca):

  <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

1. Importe e use:

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:

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

React

1. Importe e use:

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:

import 'flicker-alerts/style.css';

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

📖 API

FlickerAlerts.showAlert(config)

FlickerModals.showModal(config)

💬 Suporte

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