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

joodi profile image

Learn Zustand Right Now in the Simplest Way!

Joodi -

erikvandewiel profile image

Static text reinvented: a developer’s solution to updates without a CMS

Erik van de Wiel -

dpc profile image

Daily JavaScript Challenge #JS-35: Calculate the Product of Digits

DPC -

arindam_1729 profile image

7 Must-Try Open-Source Tools for Python and JavaScript Developers 🚀

Arindam Majumder -