Programming language: JavaScript
Tags: UI Components     Notification    
Latest version: v2.1.0

react-snackbar-alert alternatives and similar libraries

Based on the "Notification" category.
Alternatively, view react-snackbar-alert alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-snackbar-alert or a related project?

Add another 'Notification' Library



Simple snackbar-style notifications for React



Demo video


React Snackbar Alert requires React 16.8.0 or newer and styled-components 4 as peer dependencies:

npm install --save react react-dom styled-components


npm install --save react-snackbar-alert

API & Examples



Snackbar notifications in 3 easy steps:

  1. Import the SnackbarProvider component and the wrapComponent helper
  2. Wrap your application in the SnackbarProvider and pass any desired configuration props
  3. Wrap any components you want to create snackbars from by passing them to the wrapComponent helper. This will pass a createSnackbar prop to the passed component which can be used to show a snackbar notification.


  import React from 'react';

  import { SnackbarProvider, wrapComponent } from 'react-snackbar-alert';

  export default function App() {
    return (
        <Container />

  const Container = wrapComponent(function({ createSnackbar }) {
    function showSnackbar() {
        message: 'Helo Snackbar!'

    return (
        <button onClick={showSnackbar}>Show Snackbar</button>


SnackbarProvider Props

The SnackbarProvider accepts the following props:

Unless otherwise noted, any of these props can be overridden for a specific snackbar instance by adding that same property to the object passed to createSnackbar.

  • animationTimeout - The duration of the show and hide animations, in milliseconds (default: 500)
  • component - A custom component to use instead of the built-in Snackbar component. Cannot be overridden for a specific snackbar.
  • dismissable - Whether or not the created snackbars can be manually dismissed by the user
  • pauseOnHover - Whether or not a snackbar's timeout should be paused when it is hovered over (default: false)
  • position - The position on screen to show the snackbars. One of top, top-left, top-right, bottom, bottom-left, bottom-right (default: bottom). Cannot be overridden for a specific snackbar.
  • progressBar - Whether or not to show an animated progress bar showing the time before a snackbar is removed (default: true)
  • sticky - Whether or not snackbars should be sticky (not automatically removed) (default: false)
  • timeout - The time before a snackbar is removed, in milliseconds (default: 3000)

createSnackbar Options

The createSnackbar function accepts an options object, which can have the following properties:

  • animationTimeout - The duration of the show and hide animations
  • data - Custom data to use when rendering a custom snackbar
  • dismissable - Whether or not this snackbar can be manually dismissed by the user
  • message - The message to display
  • pauseOnHover - Whether or not to pause this snackbar on hover
  • progressBar - Whether or not to show the progress bar for this snackbar
  • sticky - Whether or not this snackbar should be sticky. Sticky snackbars are not automatically removed.
  • theme - The theme to use for this snackbar. One of default, info, success, warning, error (default: default)
  • timeout - The time before this snackbar is removed