Welcome

React Snackbar Alert is a very simple library for "snackbar" style notifications. It's a quick and lightweight way to let your users know what's going on in your app.

Demo

Snackbar Options Timeout (ms): Theme: Default Info Success Warning Error Progress Bar Pause on Hover Sticky Dismissable Snackbar Manager Options Position: Top Top Left Top Right Bottom Bottom Left Bottom Right Show Snackbar import React from 'react'; import { SnackbarProvider, wrapComponent } from 'react-snackbar-alert'; export default function DemoExample() { return ( <SnackbarProvider position="bottom"> <Container /> </SnackbarProvider> ); } const Container = wrapComponent(function({ createSnackbar }) { function showSnackbar() { createSnackbar({ message: 'Hello Snackbar!', dismissable: false, pauseOnHover: false, progressBar: true, sticky: false, theme: 'default', timeout: 3000 }); } return ( <div> <button onClick={showSnackbar}>Show Snackbar</button> </div> ); });

Features

Easy to use

Supported in all modern browsers (plus IE11)

Notifications can be restyled and extended

Arbitrary custom data can be specified to create rich, interactive notifications

Requirements

React Snackbar Alert requires React 16.8 or newer. It also requires styled-components 4 to be installed.