DEV Community

Dante J. Anjos
Dante J. Anjos

Posted on • Edited on

Componente Snackbar com React do zero

#react #frontend #javascript #css

Componentes snackbar são aqueles alertas flutuantes com informações importantes, ex: mensagens de erro, alertas, sucesso etc.
Utilizando React podemos criar um snackbar de forma bem simples.

Vamos ao código

Na raiz do projeto crie uma pasta chamada components e dentro desta, uma outra chamada Snackbar.

Dentro da pasta Snackbar crie os arquivos index.js e styles.css.

No arquivo index vamos criar um functional component com o JSX inicial do nosso snackbar.

import React from "react";
import "./styles.css";

export default function Snackbar() {
  return (
    <div className="snackbar visible success">
      <span>Lorem ipsum dolor sit amet</span>
      <button className="close">x</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Vamos adicionar alguns estilos para deixar nosso snackbar bonitão quando ele aparecer na tela.

.snackbar {
  background-color: #333;
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  opacity: 0;
  visibility: hidden;
  color: #fff;
  padding: 16px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 200ms ease-in-out;
}

.snackbar .close {
  font-size: 18px;
  cursor: pointer;
  transition: 200ms;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

Vamos adicionar algumas propriedades para nosso componente e começar a trabalhar na lógica de exibir e ocultar.

function Snackbar({ type, open, children, onClose }) {
  return (
    <div className={`snackbar ${open && "visible"} ${type}`}>
      <span>{children}</span>
      <button className="close" onClick={onClose}>
        &times;
      </button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Note as props open e type, essas serão essencialmente usadas para adicionar os estilos principais da snackbar e também exibir e ocultar.

className={`snackbar ${open && "visible"} ${type}`}
Enter fullscreen mode Exit fullscreen mode

Quando a prop open for true a classe .visible será adicionada ao componente. Então basta adicionar visibilidade ao componente via CSS.

.snackbar.visible {
  opacity: 1;
  bottom: 20px;
  visibility: visible;
}
Enter fullscreen mode Exit fullscreen mode

a prop type receberá valores como success, error, warning e info. Podemos usar cada um desses valores para adicionar uma cor diferente ao snackbar.

.snackbar.success {
  background-color: rgb(0, 158, 0);
}

.snackbar.info {
  background-color: rgb(86, 83, 255);
}

.snackbar.warning {
  background-color: rgb(255, 181, 44);
}

.snackbar.error {
  background-color: rgb(219, 55, 55);
}
Enter fullscreen mode Exit fullscreen mode

Obs: Para lidar com o bind dinâmico de classes poderíamos usar uma lib como classnames, mas como se trata de uma lógica bem simples, vamos fazer isso sem lib mesmo.

Toques finais

Apesar de ser um componente pequeno (400px). Para garantir a boa visualização em telas pequenas, vamos fazer um pequeno ajuste usando @media querie.

@media (max-width: 480px) {
  .snackbar {
    width: 100%;
    margin-left: 0;
    left: 0;
    border-radius: 4px 4px 0 0;
  }

  .snackbar.visible {
    bottom: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

Agora sim, nosso componente está pronto para uso.

<Snackbar
  type="success"
  open={someStateOpen}
  onClose={() => setSomeStateOpen(false)}
>
  Que snackbar massa e fácil de usar =)
</Snackbar>
Enter fullscreen mode Exit fullscreen mode

Acesse a demo no codesandbox para conferir o código completo e exemplo de uso.

Top comments (0)

Read next

laustke profile image

I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript

Louis Austke -

hkp22 profile image

JavaScript Memory Management and Optimization Techniques for Large-Scale Applications

Harish Kumar -

rverwey profile image

My First JavaScript Web App: Interactive Image Coordinate Finder

Ryan VerWey -

karenpayneoregon profile image

Window Forms Dark mode

Karen Payne -