🍫 React Snackbar Alert

Dismissable

Snackbar notifications will automatically disappear after the timeout has passed. They can also, however, be configured so that they can be manually dismissed before the timeout passes. This can be done in one of two ways:

  • Setting the dismissable prop on the SnackbarProvider (to make all snackbars dismissable)
  • Setting the dismissable property on the object passed to createSnackbar (to make only that snackbar dismissable)
import React from 'react';

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

export default function DismissableExample() {
  return (
    <SnackbarProvider dismissable={true}>
      <Container />
    </SnackbarProvider>
  );
}

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

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