How to prevent multiple times react-hot-toast easily
San
Posted on January 20, 2023
How to prevent multiple times react-hot-toast easily
You can achieve by using useToasterStore() & useEffect().
Restrict the maximum number of Toasts to show in React Toast component. You can restrict the maximum toast count by event callback function.
- You need to import useToasterStore hook from react-hot-toast
Copy/paste the given snippet into your code.
const { toasts } = useToasterStore();
const TOAST_LIMIT = 1
useEffect(() => {
toasts
.filter((t) => t.visible) // Only consider visible toasts
.filter((_, i) => i >= TOAST_LIMIT) // Is toast index over limit?
.forEach((t) => toast.dismiss(t.id)); // Dismiss – Use toast.remove(t.id) for no exit animation
}, [toasts]);
Output
It will show only one times. If you want to show multiple time you can put the number in that variable: const TOAST_LIMIT = 1
💖 💪 🙅 🚩
San
Posted on January 20, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.