Tipddy-snackbar NPM

tippdy-snackbar is a notification library which makes it extremely easy to display notifications on your web apps. It is highly customizable and enables you to stack snackbars/toasts on top of one another.

How to use
Online demo
Documentation
Redux / Mobx support

Getting Started

Use your preferred package manager:

npm install tippdy-snackbar
yarn add tippdy-snackbar

How to use

1: Wrap your app inside a SnackProvider component:

import { SnackbarProvider } from "notistack";
<SnackbarProvider maxSnack={3}>
  <App />
</SnackbarProvider>;

2: Export any component that needs to send notification using withSnackbar. By doing this, you'll have access to methods enqueueSnackbar and closeSnackbar, where the former can be used to send snackbars.

import { withSnackbar } from "notistack";
class MyComponent extends Component {
  handleNetworkRequest = () => {
    fetchSomeData()
      .then(() => this.props.enqueueSnackbar("Successfully fetched the data."))
      .catch(() => this.props.enqueueSnackbar("Failed fetching data."));
  };
  render() {
    //...
  }
}
export default withSnackbar(MyComponent);

2 (alternative): You can use useSnackbar hook in your functional components as well.

import { useSnackbar } from "notistack";
const MyButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
  const handleClick = () => {
    enqueueSnackbar("I love hooks");
  };
  return <Button onClick={handleClick}>Show snackbar</Button>;
};