DEV Community

Dante J. Anjos
Dante J. Anjos

Posted on • Updated 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

hieunh1801 profile image

react-hook-form demo

Nguyễn Hữu Hiếu -

thisweekinjavascript profile image

TC39 JavaScript Updates, TypeScript 5.7 Beta, Node.js v20.18.0 and more

James -

prashant-ardeshana profile image

#3 How to fetch the store details and print to the fronted using react Next.

Prashant Ardeshana -

m_maksimovic_ profile image

🦸 OSS Heroes: Pilcrow, a student who built Lucia - auth library with 9.5k stars on GitHub ⭐ 🇯🇵

Milica Maksimovic -