FlickerAlerts

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.

Instalação

Para instalar o FlickerAlerts, utilize o npm:

npm install flicker-alerts

Documentação de Uso

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.

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"

Instalação

Instale via npm:

npm install flicker-alerts

Uso

Após a instalação, a biblioteca será importada no seu código, e você não precisará mais incluir o arquivo <script> diretamente no HTML. Em vez disso, você utilizará a função showAlert em seus componentes.

Uso no Angular

Com o FlickerAlerts instalado, importe-o no seu componente Angular e utilize-o conforme mostrado abaixo:

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

          export class AppComponent {
            showAlert() {
              FlickerAlerts.showAlert({
                type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
                title: 'Título',
                message: 'Mensagem personalizada',
                position: 'top-right' // Opções: 'top-right', 'top-left',   'bottom-right', 'bottom-left',  'center', 'top-center',   'bottom-center'
              });
            }
          }

Caso o Estilo Não Esteja Sendo Aplicado no Angular

Se o estilo da biblioteca não estiver sendo aplicado corretamente, verifique se você adicionou o caminho para o arquivo CSS no angular.json.

Abra o arquivo angular.json, e no campo styles dentro de angular.json, adicione o caminho para o CSS da biblioteca, como mostrado abaixo:

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

Uso no React

Com o FlickerAlerts instalado, você pode usá-lo no seu componente React assim:

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



          const showAlert = () => {
            FlickerAlerts.showAlert({
              type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
              title: 'Título',
              message: 'Mensagem personalizada',
              position: 'top-right'     // Opções: 'top-right', 'top-left',   'bottom-right', 'bottom-left',  'center', 'top-center',   'bottom-center'
            });
          };      

Modais

Uso no Angular

Com o FlickerAlerts instalado, você pode usá-lo no seu componente React assim:

import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
        
          export class AppComponent {
            showModal() {
              FlickerModals.showModal({
                type: 'warning', // Tipos: 'warning', 'delete' 
                title: 'Título do Modal',
                message: 'Mensagem personalizada para o modal.',
                onConfirm: () => { console.log('Confirmado!'); },
                onCancel: () => { console.log('Cancelado!'); }
              });
            }
          }
             

Uso no React

Com o FlickerAlerts instalado, você pode usá-lo no seu componente React assim:

  import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
        
          const showModal = () => {
            FlickerModals.showModal({
              type: 'delete', // Tipos: 'warning', 'delete' 
              title: 'Título do Modal',
              message: 'Mensagem personalizada para o modal.',
              onConfirm: () => { console.log('Deletado com sucesso!'); },
              onCancel: () => { console.log('Cancelado!'); }
            });
          };
             

Caso o Estilo Não Esteja Sendo Aplicado no React

No React, você não precisa de um arquivo de configuração centralizado como o angular.json. Para garantir que o estilo da biblioteca FlickerAlert seja aplicado corretamente, basta importar o arquivo CSS diretamente no seu código.

No arquivo principal, como index.js ou App.js, adicione a seguinte linha para importar o CSS:

import 'flicker-alerts/style.css';