mui-sonner is is a package that combines sonner and MUI to achieve a simple, opinionated toast component for react.
If you are not using MUI, you should use sonner directly.
- Avoids Context: Like sonner, it doesn't use context.
- Alerts: The toast that is actually built around using the Alert component from MUI, so it's easy to customize.
- Styling: Leverages MUI components, meaning the toast and components inside it will use your already defined MUI theme.
npm install mui-sonner
Add to your app, preferably quite high in the tree. After that you can use toast()
from anywhere in your app.
import { Toaster, toast } from "mui-sonner";
// ...
function App() {
return (
<div>
<Toaster />
<button onClick={() => toast("My first toast")}>toast please</button>
</div>
);
}