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 chamadacomponents e dentro desta, uma outra chamadaSnackbar.

Dentro da pastaSnackbar crie os arquivosindex.js estyles.css.

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

importReactfrom"react";import"./styles.css";exportdefaultfunctionSnackbar(){return(<divclassName="snackbar visible success"><span>Lorem ipsum dolor sit amet</span><buttonclassName="close">x</button></div>);}

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:all200msease-in-out;}.snackbar.close{font-size:18px;cursor:pointer;transition:200ms;padding:0;border:0;background-color:transparent;color:#fff;}

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

functionSnackbar({type,open,children,onClose}){return(<divclassName={`snackbar${open&&"visible"}${type}`}><span>{children}</span><buttonclassName="close"onClick={onClose}>&times;</button></div>);}

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

className={`snackbar${open&&"visible"}${type}`}

Quando a propopen fortrue a classe.visible será adicionada ao componente. Então basta adicionar visibilidade ao componente via CSS.

.snackbar.visible{opacity:1;bottom:20px;visibility:visible;}

a proptype 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);}

Obs: Para lidar com o bind dinâmico de classes poderíamos usar uma lib comoclassnames, 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:4px4px00;}.snackbar.visible{bottom:0;}}

Agora sim, nosso componente está pronto para uso.

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

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