A biblioteca SweetAlert facilita a criação de componentes de notificação personalizados no React.

SweetAlert é uma biblioteca popular que oferece a capacidade de criar componentes de notificação personalizados para seu aplicativo React. Você pode usar notificações para alertar os usuários sobre informações importantes, erros ou ações bem-sucedidas em seu aplicativo. Isso resulta em uma ótima experiência do usuário.

Instalando a Biblioteca SweetAlert

Para usar o SweetAlert biblioteca para criar notificações, você precisa instalá-lo usando qualquer gerenciador de pacotes de sua escolha.

Você pode instalá-lo através do Gerenciador de pacotes NPM executando o seguinte comando em seu terminal:

npm install sweetalert --save

Usando o SweetAlert para criar notificações

Criar notificações personalizadas em seu aplicativo React usando a biblioteca SweetAlert é semelhante a usando a biblioteca Toastify. O swal A função fornecida pela biblioteca SweetAlert cria uma instância do componente de notificação e define as propriedades da notificação.

instagram viewer

Aqui está um exemplo de uso do swal() função para criar um componente de notificação:

importar Reagir de'reagir'
importar swal de'doce alerta'
funçãoAplicativo() {


const notificar = () => swal('Olá');


retornar (






exportarpadrão Aplicativo

Clicar no botão chamará o swal função, que exibirá uma notificação com a mensagem "Olá".

O swal função recebe três parâmetros. O primeiro parâmetro é o título da notificação, o segundo parâmetro é a mensagem e o terceiro é o ícone a ser exibido em sua notificação.

Você pode definir o ícone parâmetro para um dos valores predefinidos, ou seja, sucesso, aviso, erro, ou informação. O ícone de notificação será então baseado nos valores que você passou.

Por exemplo:

importar Reagir de'reagir'
importar swal de'doce alerta'
funçãoAplicativo() {


const notificar = () => swal('Olá', 'Bem vindo a minha pagina', 'sucesso');


retornar (






exportarpadrão Aplicativo

Quando o usuário clica no botão, ele chama o notificar função. Esta função exibirá uma notificação com a mensagem "Olá" e "Bem-vindo à minha página" com um ícone de sucesso.

Uma alternativa ao uso do swal função com os três parâmetros seria usar o swal função com o parâmetro de objeto. Este parâmetro de objeto contém propriedades que definem o componente de notificação.

Por exemplo:

importar Reagir de'reagir'
importar swal de'doce alerta'
funçãoAplicativo() {


const notificar = () => swal(
 {
 título: 'Olá',
 texto: 'Bem vindo a minha pagina',
 ícone: 'sucesso',
 botão: 'OK',
 }
 );


retornar (






exportarpadrão Aplicativo

No bloco de código acima, o swal A função recebe um objeto com as seguintes propriedades: título, texto, ícone, e botão.

O título propriedade especifica o título da notificação, enquanto a propriedade texto propriedade define a mensagem. Com o ícone propriedade, você pode especificar o tipo de ícone exibido na notificação.

Por último, o botão A propriedade especifica o texto do botão exibido na notificação. Neste caso, o botão exibe o texto OK.

Personalizando a propriedade do botão

Você pode personalizar o botão propriedade do seu componente de notificação para atender às suas necessidades de design. O botão A propriedade recebe um objeto com propriedades usadas para configurar o comportamento e a aparência do botão.

Um botão padrão contém as seguintes propriedades:

swal(
 {
 botão: {
 texto: "OK",
 valor: verdadeiro,
 visível: verdadeiro,
 nome da classe: "",
 fecharModal: verdadeiro
 },
 }
 );

No bloco de código acima, as seguintes propriedades são usadas com o botão:

  • texto: O texto a ser exibido no botão.
  • valor: o valor a ser retornado quando o usuário clicar no botão. Neste caso, o valor é verdadeiro.
  • visível: um valor booleano indica se o botão deve ficar visível.
  • nome da classe: Uma string representando a classe CSS a ser aplicada ao botão.
  • closeModal: Um valor booleano que indica se o modal deve ser fechado quando o botão é clicado.

Você também pode renderizar mais de um botão usando uma matriz com o botões propriedade. A matriz terá strings como seus elementos.

Por exemplo:

swal(
 {
 botões: ["Cancelar", "OK"],
 }
 );

Neste exemplo, seu componente de notificação conterá dois botões com os textos' cancelar e OK. Configurando o botões propriedade para falso renderizará uma notificação sem botão.

Renderizando elementos HTML dentro do componente de notificação

Você também pode renderizar elementos HTML separados de strings simples como uma notificação. Isso fornece uma ampla gama de opções de personalização.

Por exemplo:

importar Reagir de'reagir'
importar swal de'doce alerta'
funçãoAplicativo() {


const notificar = () => swal(
 {
 contente: {
 elemento: 'entrada',
 atributos: {
 espaço reservado: 'Primeiro nome',
 tipo: 'texto'
 }
 },
 botões: 'Inscrever-se'
 }
 )


retornar (


"aplicativo">


exportarpadrão Aplicativo

Neste exemplo, você usa o contente propriedade para renderizar um campo de entrada com texto de espaço reservado.

Você especifica o conteúdo da notificação usando o contente propriedade e o elemento HTML para renderizar com o elemento propriedade. Para especificar os atributos do elemento HTML, você usa o atributos propriedade.

O bloco de código acima renderizará a notificação abaixo quando você clicar no elemento de botão.

Estilizando o componente de notificação

Em vez de aderir ao estilo de caixa de notificação padrão fornecido pela biblioteca SweetAlert, você pode personalizar a aparência da caixa de notificação aplicando seus próprios estilos CSS.

Você vai usar o nome da classe para adicionar seus estilos à notificação. O nome da classe A propriedade define uma classe CSS para a notificação.

Por exemplo:

swal(
 {
 título: 'Olá',
 texto: 'Bem vindo a minha pagina',
 botão: falso,
 nome da classe: 'alerta',
 }
 )

A notificação no bloco de código acima tem um nome da classe valor alerta. Depois de criar a notificação e definir o nome da classe, você definirá seus estilos CSS:

.alerta{
cor de fundo: verde;
família de fontes: cursiva;
raio da borda: 15px;
}

Os estilos CSS acima serão aplicados à notificação na renderização:

Fechando o componente de notificação

A biblioteca SweetAlert fornece várias opções para personalizar a maneira como suas notificações são fechadas. Estas opções são as closeOnEsc, closeOnClickOutside, e cronômetro propriedades.

O closeOnEsc A propriedade determina se a caixa de notificação fecha quando o usuário pressiona a tecla Esc no teclado. O closeOnEsc propriedade assume um valor booleano.

swal(
 {
 ...,
 closeOnEsc: falso,
 }
 )

Por padrão, o closeOnEsc propriedade está definida como verdadeiro. No bloco de código acima, você está definindo o closeOnEsc propriedade para falso. Definindo a propriedade como falso, o usuário não pode fechar a caixa de notificação pressionando a tecla Esc.

Você também pode determinar se o usuário pode fechar a caixa de notificação clicando fora da caixa usando o closeOnClickOutside propriedade.

Se a propriedade estiver definida como verdadeiro, o closeOnClickOutside A propriedade habilita o fechamento da caixa de notificação clicando em qualquer lugar fora dela. Este é o comportamento padrão do SweetAlert. Para interromper esse comportamento, defina o closeOnClickOutside propriedade para falso.

swal(
 {
 ...,
 closeOnClickOutside: falso,
 }
 )

Com o cronômetro propriedade, você pode definir um limite de tempo para que a caixa de notificação se feche automaticamente. O cronômetro A propriedade aceita um valor inteiro em milissegundos.

swal(
 {
 ...,
 cronômetro: 5000,
 }
 )

Neste exemplo, o cronômetro propriedade está definida como 5000. A notificação ficará visível por apenas 5 segundos.

Notificações personalizadas eficientes usando o SweetAlert

SweetAlert é uma biblioteca poderosa com a qual você pode criar notificações personalizadas em um aplicativo React. Usando o da biblioteca swal função, agora você pode criar notificações com propriedades e comportamento personalizados. Você também pode usar outras bibliotecas como React-Toastify para criar alertas personalizados em um aplicativo React.