Construindo Popovers, Alertas e Toasts com Blueprint UI em React

últimas postagens

Introdução ao Blueprint UI

O Blueprint UI é um conjunto de ferramentas React amplamente utilizado, oferecendo uma coleção de componentes e estilos padronizados para desenvolver aplicações web modernas. Um dos seus pontos fortes reside na facilidade com que permite criar elementos como popovers, alertas e toasts, essenciais para fornecer informações e feedback aos utilizadores de forma eficaz.

Instalação do Blueprint UI

Antes de começar a usar o Blueprint UI, é necessário instalá-lo. Este processo pode ser realizado através de qualquer gestor de pacotes de sua preferência.

Para instalar usando o npm, o gestor de pacotes JavaScript, execute o seguinte comando no seu terminal:

 npm install @blueprintjs/core

Após a instalação, é preciso importar os arquivos CSS da biblioteca para o seu projeto:

 @import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";

Com esta importação, os estilos visuais do Blueprint UI serão integrados aos componentes que a biblioteca oferece, garantindo uma aparência consistente e profissional.

Criação de Popovers com Blueprint UI

Popovers são elementos flutuantes que aparecem quando o utilizador interage com um elemento, seja passando o rato ou clicando. Servem para apresentar informações adicionais ou opções relevantes ao utilizador.

Para implementar popovers em aplicações React usando o Blueprint UI, o componente Popover2 deve ser instalado.

Para instalar o Popover2, utilize o seguinte comando no terminal:

 npm install --save @blueprintjs/popover2

Não se esqueça de importar a folha de estilo deste pacote no seu arquivo CSS:

 @import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";

Após a importação, o componente Popover2 estará pronto para uso na criação de popovers na sua aplicação.

Exemplo de implementação:

 import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";function App() {
  const popoverContent = (
    <div>
      <h3>Título do Popover</h3>
      <p>Este é o conteúdo dentro do popover.</p>
    </div>
  );
  return (
    <div>
      <Popover2 content={popoverContent}>
        <Button intent="success" text="Clique Aqui" />
      </Popover2>
    </div>
  );
}
export default App;

Este código demonstra como criar um popover utilizando o componente Popover2. A variável `popoverContent` contém a estrutura JSX do conteúdo do popover.

O componente Popover2 utiliza o conteúdo definido em `popoverContent` através da propriedade `content`. A propriedade `content` especifica o que é apresentado no popover. Neste exemplo, o Popover2 envolve um componente Button, o que significa que o popover surgirá quando o botão for clicado.

O popover resultante terá uma aparência inicial simples, como demonstrado aqui:

Para personalizar o estilo do conteúdo do popover, adicione uma propriedade `className` ao código JSX do popover:

 const popoverContent = (
  <div className="popover">
    <h3>Título do Popover</h3>
    <p>Este é o conteúdo dentro do popover.</p>
  </div>
);

Em seguida, defina a classe CSS correspondente no seu arquivo de estilos:

 .popover {
  padding: 1rem;
  background-color: #e2e2e2;
  font-family: cursive;
}

Com o estilo CSS aplicado, o popover terá uma aparência mais personalizada e agradável:

O componente Popover2 possui várias propriedades que permitem configurá-lo de acordo com as suas necessidades, como `popoverClassName`, `onInteraction`, `isOpen`, `minimal` e `placement`.

A propriedade `placement` define a posição preferencial do popover em relação ao elemento de origem. Os valores disponíveis são:

auto
auto-start
auto-end
top
top-start
top-end
bottom
bottom-start
bottom-end
right
right-start
right-end
left
left-start
left-end

Com `popoverClassName`, é possível atribuir um nome de classe CSS ao elemento popover. É necessário criar previamente a classe no arquivo CSS para usar esta propriedade.

Por exemplo:

 .custom-popover {
  background-color: #e2e2e2;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border-radius: 12px;
  padding: 1rem;
}

Após criar a classe CSS, aplique-a ao componente Popover2 usando a propriedade `popoverClassName`:

 <Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="Clique Aqui" />
</Popover2>

A propriedade `minimal` controla o estilo do popover, aceitando valores booleanos. Quando definida como `true`, o popover terá um estilo mais simples, sem seta e com uma aparência de caixa básica.

Criação de Alertas

Alertas são notificações exibidas na tela para informar o usuário sobre informações ou ações importantes, como mensagens de erro, sucesso ou avisos.

A criação de alertas no Blueprint UI é similar ao processo em outras bibliotecas como Chakra UI. O componente Alert será utilizado para criar alertas na aplicação React.

Exemplo:

 import React from "react";
import { Alert, Button } from "@blueprintjs/core";function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleOpen = () => {
    setIsOpen(true);
  };
  const handleClose = () => {
    setIsOpen(false);
  };
  return (
    <div>
      <Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="Fechar">
        <p>Esta é uma mensagem de alerta</p>
      </Alert>
      <Button text="Mostrar Alerta" intent="success" onClick={handleOpen} />
    </div>
  );
}
export default App;

Este código mostra como importar o componente Alert do pacote `@blueprintjs/core`. O componente Alert renderiza a mensagem de alerta na tela, usando as propriedades `isOpen`, `onClose` e `confirmButtonText`.

A propriedade `isOpen` controla a visibilidade do alerta. `true` mostra o alerta e `false` o oculta. `onClose` é uma função que é executada quando o usuário fecha o alerta.

A propriedade `confirmButtonText` define o texto do botão de confirmação.

A notificação de alerta resultante terá a seguinte aparência:

Criação de Toasts com Blueprint UI

Toasts são notificações que aparecem na tela para informar o usuário sobre informações ou eventos relevantes, similares aos alertas, mas menos intrusivos e com desaparecimento automático.

Para criar um toast em aplicações React com Blueprint UI, use o componente OverlayToaster. Este componente cria uma instância Toaster usada para gerar toasts individuais.

Exemplo:

 import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";const toasterInstance = OverlayToaster.create({ position: "top-right" });
function App() {
  const showToast = () => {
    toasterInstance.show({
      message: "Este é um toast",
      intent: "primary",
      timeout: 3000,
      isCloseButtonShown: false,
      icon: "bookmark",
    });
  };
  return (
    <div>
      <Button text="Mostrar Toast" intent="success" onClick={showToast} />
    </div>
  );
}
export default App;

O código utiliza o método `OverlayToaster.create` para criar a instância do toaster, definindo sua posição através da propriedade `position`.

A função `showToast` usa o método `show` da instância `toasterInstance` para exibir o toast quando chamada. O método `show` recebe um objeto com as propriedades `message`, `intent`, `timeout`, `isCloseButtonShown` e `icon`.

A propriedade `message` define o texto do toast, enquanto `intent` especifica o tipo de toast, afetando seu estilo.

O `timeout` controla o tempo de exibição do toast. `icon` define o ícone exibido no toast. E, com `isCloseButtonShown`, é possível controlar a exibição do botão de fechar no sistema toast.

Ao clicar no botão, o código gerará um toast semelhante à imagem abaixo:

Se o objetivo é criar notificações de sistema atraentes na aplicação React, o Blueprint UI é uma ótima opção, oferecendo uma variedade de componentes predefinidos que facilitam a criação de notificações consistentes com o estilo da aplicação.

Para projetos menores, onde todos os recursos do Blueprint UI não são necessários, o React Toastify surge como uma alternativa leve para criar notificações atraentes.

Aprimorando a Experiência do Usuário

Este artigo detalhou como criar popovers, alertas e toasts em aplicações React utilizando o Blueprint UI. Esses componentes são cruciais para fornecer feedback e informações aos utilizadores, melhorando a experiência geral. Com as informações fornecidas, é possível criar esses elementos com personalização mínima e eficiência.