React JS Notistack - Snackbar Notifications

📌 What is Notistack?

Notistack is a powerful Snackbar notification library for React that allows displaying stacked notifications with ease.

🚀 1. Installation

To install Notistack in a React project, run:

npm install notistack

&

yarn add notistack

Step 1: Setup in App.js or Root Component

Wrap your application with SnackbarProvider:

import React from "react";
import { SnackbarProvider } from "notistack";
import MyComponent from "./MyComponent";

function App() {
 return (
   <SnackbarProvider maxSnack={3} autoHideDuration={3000}>
     <MyComponent />
   </SnackbarProvider>
 );
}

export default App;

✅ maxSnack={3} → Limits the number of visible alerts
✅ autoHideDuration={3000} → Auto-closes notifications in 3 seconds

Step 2: Trigger an Alert (Inside a Component)

Use useSnackbar to display alerts:

import React from "react";
import { useSnackbar } from "notistack";

const MyComponent = () => {
 const { enqueueSnackbar } = useSnackbar();

 const handleClick = () => {
   enqueueSnackbar("This is a success message!", { variant: "success" });
 };

 return <button onClick={handleClick}>Show Notification</button>;
};

export default MyComponent;

✅ enqueueSnackbar("Message", { variant: "success" }) → Shows a snackbar with a success style

🎨 3. Customizing Notistack Alerts

✅ Different Alert Types

You can change the variant to customize the look:

enqueueSnackbar("Info Message", { variant: "info" });
enqueueSnackbar("Success Message", { variant: "success" });
enqueueSnackbar("Warning Message", { variant: "warning" });
enqueueSnackbar("Error Message", { variant: "error" });
 

✅ Custom Styling (Theme & Icons)

You can apply custom styles css using ContentProps or sx:

enqueueSnackbar("Custom Styled Alert", {
 variant: "info",
 autoHideDuration: 4000,
 anchorOrigin: { vertical: "top", horizontal: "right" },
 style: { backgroundColor: "#ff9800", color: "white", fontWeight: "bold" },
});
 

✅ Custom Background & Color
✅ Positioning: anchorOrigin: { vertical: "top", horizontal: "right" }

✅ Adding an Action Button
enqueueSnackbar("Action Example", {
 variant: "warning",
 action: (key) => (
   <button onClick={() => alert("Action Clicked!")}>UNDO</button>
 ),
});
✅ Adds a clickable button inside the notification

🔥 4. Dismissing a Snackbar Manually

const { enqueueSnackbar, closeSnackbar } = useSnackbar();

const showNotification = () => {
 enqueueSnackbar("This can be closed manually", {
   variant: "info",
   persist: true, // Keeps it open until closed manually
   action: (key) => <button onClick={() => closeSnackbar(key)}>Dismiss</button>,
 });
};
 

✅ persist: true → Keeps the snackbar open
✅ closeSnackbar(key) → Closes the specific snackbar

🎯 5. Using a Custom Snackbar Component

You can create a custom snackbar component with your design:

import { SnackbarProvider, useSnackbar } from "notistack";

const CustomSnackbar = ({ message }) => (
 <div className="p-3 bg-purple-500 text-white rounded-lg">{message}</div>
);

const MyComponent = () => {
 const { enqueueSnackbar } = useSnackbar();

 const showCustomSnackbar = () => {
   enqueueSnackbar(<CustomSnackbar message="Styled Alert!" />, {
     persist: true,
   });
 };

 return <button onClick={showCustomSnackbar}>Show Custom Snackbar</button>;
};
 

✅ Uses a fully custom-styled alert inside Notistack

🔗 Summary

✅ Install: npm install notistack
✅ Use SnackbarProvider in App.js
✅ Trigger Notifications using enqueueSnackbar()
✅ Customize Position, Color, & Actions
✅ Manually Close & Use Custom Components