Try it out on react-hot-toast.com
react-hot-toast is a lightweight React notification library with beautiful animations by default.
There are a lot of snackbar, toast and notification libraries out there. None of them quite did what I wanted. They are either not animated, hard to style, or unnecessarily big. I ended up writing my own implementation for PS Tunnel, which is now open source with this library.
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F63aeeefc-6653-4f3a-9d53-195905cb4691%2Freact-hot-toast.png?table=block&id=8b3d7381-c901-430d-a491-6c3bfe1066c7&cache=v2)
This react-toastify alternative has a couple of advantages:
- Beautiful by default
- No CSS imports needed
- Has`toast.promise()`
- Almost half the size
- Improved pause behavior
- Easier to style
- Headless mode
Basic Example
import toast, { Toaster } from 'react-hot-toast';
const notify = () => toast('Here is your toast.');
const App = () => {
return (
<div>
<button onClick={notify}>Make me a toast</button>
<Toaster />
</div>
);
};
You can check out it's source GitHub.