Como criar um componente de notificação personalizado no React

Existem vários pacotes de terceiros disponíveis no React que podem ajudá-lo a criar um componente de notificação. No entanto, se você deseja apenas um componente de notificação simples, pode criar o seu próprio para evitar a adição de dependências desnecessárias ao seu aplicativo.

Configurando o Projeto

Você irá use o Vite para configurar o aplicativo React. O Vite é uma ferramenta de construção que permite montar rapidamente um projeto React.

Para começar, use o gerenciador de pacotes yarn para criar um novo projeto Vite executando o comando abaixo.

fio criar vite

O comando solicitará que você insira um nome de projeto. Digite o nome do projeto e pressione Enter. Em seguida, ele solicitará que você selecione uma estrutura. Escolher reagir e pressione Enter. Por fim, ele solicitará que você selecione uma variante, escolha JavaScript e, em seguida, pressione Enter.

Aqui estão as configurações que este tutorial usará:

Após o Vite criar o projeto, navegue até a pasta do projeto e abra-o usando um editor de código.

Você pode então iniciar o servidor de desenvolvimento executando o seguinte comando.

desenvolvedor de fios

Isso abrirá seu novo aplicativo React em seu navegador padrão em http://localhost: 5173/.

Projetando o componente de notificação

Para criar um componente de notificação flexível, ele precisa ser capaz de lidar com diferentes tipos de notificações com vários títulos, descrições e estilos. Por exemplo, ele precisa renderizar uma notificação de aviso, sucesso e erro.

Aqui estão diferentes variações que o componente de notificação deve ser capaz de renderizar.

Você pode fazer isso passando props para o componente que especifica o tipo de notificação a ser renderizada, o título e o texto da descrição. Ao usar esses adereços, você pode personalizar o componente e reutilizá-lo em todo o aplicativo com o mínimo de esforço. Se você precisar de uma atualização sobre adereços, aqui está um artigo que explica como usar adereços no React.

Criando o componente de notificação

No origem pasta, crie um novo arquivo chamado Notification.jsx e adicione o seguinte código.

exportarpadrãofunçãoNotificação({tipo, título, descrição}) {
retornar (


 {/* Conteúdo da notificação */}
 </div>
 )
}

Este código cria um componente funcional chamado Notificação com três adereços: tipo, título, e descrição. Você usará esses acessórios para personalizar o estilo e o conteúdo da notificação.

No design, o componente possui alguns ícones, a saber, informações e um ícone de cruz. Você pode baixar ícones gratuitos para usar ou use um componente de ícone de um pacote como ícones de reação. Este tutorial usará ícones de reação então instale-o executando o comando abaixo.

fio adicionar ícones de reação

Em seguida, importe os ícones na parte superior do Notificação componente.

importar { RxCross2, RxInfoCircled } de"ícones de reação/rx"

Agora, você pode modificar o componente para usar os ícones, o título e os valores prop da descrição para criar o conteúdo da notificação.

exportarpadrãofunçãoNotificação({tipo, título, descrição}) {
retornar (







{title}</div>
{descrição}</div>
 </div>
 </div>

 </div>
 )
}

O próximo passo é estilizá-lo dependendo do tipo passado.

Uma abordagem que você pode adotar é definir classes CSS para cada tipo de notificação que deseja exibir. Você pode aplicar condicionalmente a classe apropriada com base no tipo que é passado.

Para começar, crie um novo arquivo chamado notificação.css e importá-lo em Notification.jsx adicionando o seguinte código no topo.

importar "./notification.css"

Então em notificação.css defina os estilos base para o componente de notificação:

.notificação {
mostrar: flex;
direção flexível: linha;
itens de alinhamento: início flexível;
preenchimento: 8px;
}
.notification__left {
mostrar: flex;
direção flexível: linha;
preenchimento: 0px;
brecha: 8px;
margem direita: 24px;
}
.notification__content {
mostrar: flex;
direção flexível: coluna;
itens de alinhamento: início flexível;
preenchimento: 0px;
}
.notification__title {
família de fontes: "Inter";
estilo de fonte: normal;
espessura da fonte: 500;
tamanho da fonte: 14px;
}
.notification__description {
família de fontes: "Inter";
estilo de fonte: normal;
espessura da fonte: 400;
tamanho da fonte: 12px;
preenchimento: 0;
}

Você pode então definir os estilos para os diferentes tipos de notificação adicionando o seguinte código no arquivo CSS.

.notification__success {
fundo: #f6fef9;
fronteira: 1pxsólido#2f9461;
raio da borda: 8px;
}
.notification__error {
fundo: #fffbfa;
fronteira: 1pxsólido#cd3636;
raio da borda: 8px;
}
.notification__warning {
fundo: #fffcf5;
fronteira: 1pxsólido#c8811a;
raio da borda: 8px;
}

O código acima estiliza o contêiner de notificação com base no tipo passado.

Para personalizar o título, use os seguintes estilos.

.notification__title__success {
cor: #2f9461;
}
.notification__title__warning {
cor: #c8811a;
}
.notification__title__error {
cor: #cd3636;
}

Para o texto de descrição personalizado, use estes estilos.

.notification__description__success {
cor: #53b483;
}
.notification__description__warning {
cor: #e9a23b;
}
.notification__description__error {
cor: #f34141;
}

E para os ícones, use as seguintes classes.

.notification_icon_error {
cor: #cd3636;
}
.notification__icon__success {
cor: #2f9461;
}
.notification__icon__warning {
cor: #c8811a;
}

Então, no Notificação componente, você pode aplicar condicionalmente a classe apropriada com base no tipo suporte, assim:

exportarpadrãofunçãoNotificação({tipo, título, descrição}) {
retornar (
`notificação de notificação__${tipo}`}>
`notification__left`}>
`notification__icon__${tipo}`}/>
"notificação__conteúdo">
`notification__title notification__title__${tipo}`}>{title}</div>
`notification__description notification__description__${tipo}`}>{descrição}</div>
 </div>
 </div>
`notification__icon__${tipo}`}/>
 </div>
 )
}

Neste componente, você está definindo dinamicamente a classe dependendo do tipo, como notificação__sucesso ou notificação__erro.

Para ver isso em ação, importe o componente Notificação em App.jsx e use-o da seguinte forma:

importar Notificação de'./Notificação'
funçãoAplicativo() {
retornar (
 <>
 tipo="sucesso"
 titulo="Tarefa completa"
 descrição ="Sua tarefa foi concluída com sucesso."
 />
 </>
 )
}
exportarpadrão Aplicativo

Agora, você pode passar um tipo diferente para o Notificação componente e renderize uma notificação apropriada que corresponda à mensagem.

Isso é essencial para uma boa experiência do usuário porque os usuários passaram a associar diferentes cores e estilos a diferentes cenários, e é importante usar essas associações de forma consistente. Por exemplo, seria confuso informar ao usuário que ele carregou uma foto com sucesso em uma caixa de notificação vermelha. Eles podem pensar que o upload falhou, mesmo que tenha sido bem-sucedido.

Adicionando interatividade ao componente de notificação

Você aprendeu como usar adereços para criar um componente de notificação personalizável. Para ir ainda mais longe, você pode adicionar transições a este componente para torná-lo mais envolvente. Por exemplo, você pode usar animações CSS para deslizar o componente de notificação para a tela e deslizá-lo para fora após uma certa duração.