Comments (30)
You can achieve by using useToasterStore()
& useEffect()
. We can read the state of all toasts, and dismiss them if our limit is reached.
const { toasts } = useToasterStore();
const TOAST_LIMIT = 3
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]);
Check out this CodeSandbox example.
from react-hot-toast.
I think the proposed solution works well enough – no need to add this as native API IMO.
from react-hot-toast.
According to the demand, it's time for a proper API. Will look into this for the next release.
from react-hot-toast.
In the meantime, I used @timolins filter
solution in a hook so I don't have to write that useEffect
everywhere:
useToast.ts
import { useEffect, useState } from "react";
import t, { useToasterStore } from "react-hot-toast";
const useToast = () => {
const { toasts } = useToasterStore();
const [toastLimit, setToastLimit] = useState<number>(3);
useEffect(() => {
toasts
.filter((tt) => tt.visible)
.filter((_, i) => i >= toastLimit)
.forEach((tt) => t.dismiss(tt.id));
}, [toasts]);
const toast = {
...t,
setLimit: (l: number) => {
if (l !== toastLimit) {
setToastLimit(l);
}
},
};
return { toast };
};
export default useToast;
Still, hopefully it'll be part of the native API soon
from react-hot-toast.
There's kind of a hack using css -
Give a containerClassName in Toaster -
<Toaster ... containerClassName="toaster-wrapper" ...
And simply put this in your css -
.toaster-wrapper > div { display: none !important; } .toaster-wrapper > div:first-child { display: flex !important; }
and you can use nth-child concept to show the number of toast you want.
from react-hot-toast.
Any news?
from react-hot-toast.
if your case its showing the same error unlimited times, you can use the option "id" to prevent this.
https://react-hot-toast.com/docs/toast
example:
toast.success('Copied to clipboard!', {
id: 'clipboard',
});```
from react-hot-toast.
Any Update guys on this ??
from react-hot-toast.
Any updates on this? This is a very basic feature that shouldn't be hard to add to the library
from react-hot-toast.
I think it's time someone create a fix for this and create one PR
from react-hot-toast.
@LuisEgan Yeah, I've used a similar solution as I wanted to set a max limit on mobile devices.
Hoping to have an official API soon.
from react-hot-toast.
Any updates on this?
from react-hot-toast.
.toaster-wrapper > div { display: none !important; } .toaster-wrapper > div:nth-child(-n+3) { display: flex !important; }
this works
from react-hot-toast.
Any updates?
from react-hot-toast.
<Toaster ... containerClassName="toaster-wrapper" ...
<Toaster ... containerClassName="toaster-wrapper" ...
from react-hot-toast.
It is just absurd that the issue has been opened since 2021 and there is still no new addition in the api.
from react-hot-toast.
That sounds like a reasonable improvement that shouldn't be too hard to implement. Consider this as on the road map.
from react-hot-toast.
Hey @timolins. I have been looking at some open source projects to contribute to, and this looks like one awesome project I am willing to work on. Would you mind having me look at this issue?
from react-hot-toast.
I'm also find this useful, since show multiple toast in a time a bit not needed
Is there any way how to do this with current version? At least without using useToaster
from react-hot-toast.
We wanted to extend it in a corp ui-kit. Could you add a possibility to change TOAST_LIMIT
from <Toaster/>
props? Or should I open a PR?
react-hot-toast/src/core/store.ts
Line 4 in 0d417d9
I think the proposed solution works well enough – no need to add this as native API IMO.
from react-hot-toast.
Thanks @timolins! I'd be happy to write a PR for this if you'd be open to that?
from react-hot-toast.
Anything yet @timolins?
from react-hot-toast.
I created a custom toaster component based on previous comments,
`
const CustomRHToaster = () => {
const { toasts } = useToasterStore();
const TOAST_LIMIT = 10;
useEffect(() => {
toasts
.filter((_toast) => toast.visible) // Only consider visible toasts
.filter((, i) => i >= TOAST_LIMIT) // Is toast index over limit?
.forEach((_toast) => toast.dismiss(_toast.id)); // Dismiss – Use toast.remove(_toast.id) for no exit animation
}, [toasts])
return
}
`
from react-hot-toast.
from react-hot-toast.
Any updates @timolins ?
from react-hot-toast.
if your case its showing the same error unlimited times, you can use the option "id" to prevent this. https://react-hot-toast.com/docs/toast example:
toast.success('Copied to clipboard!', { id: 'clipboard', });```
I tried this method since the other method with toaster store would make the animation very funky and old toasts not disappearing immediately. This method is much nicer since it just replaces the content of the toast. However it since like the last toast would linger for a long time since the duration has been accumulating for the same id? This feels like a bug and shouldnt happen though. The correct behavior should reset the timer but not accumulating it?
from react-hot-toast.
Any update on this? I've just switched to using toastr but I may have to find an alternative if this is not fixed/added.
from react-hot-toast.
Please add an inbuilt method/option for this, I had to implement the whole logic my self. 🫠
If possible please add info() and warning() methods. 🙏🏻
from react-hot-toast.
Any updates on this? I think the number limit would be an awesome feature. Also adding info() and warning() mentioned by
@pranavgoel29 would improve this package a lot.
from react-hot-toast.
Hi. here's a simple wrapper component ToasterWithMax
"use client";
import React, { useEffect } from "react";
import toast, { Toaster, useToasterStore } from "react-hot-toast";
function useMaxToasts(max: number) {
const { toasts } = useToasterStore();
useEffect(() => {
toasts
.filter((t) => t.visible) // Only consider visible toasts
.filter((_, i) => i >= max) // Is toast index over limit?
.forEach((t) => toast.dismiss(t.id)); // Dismiss – Use toast.remove(t.id) for no exit animation
}, [toasts, max]);
}
export function ToasterWithMax({
max = 10,
...props
}: React.ComponentProps<typeof Toaster> & {
max?: number;
}) {
useMaxToasts(max);
return <Toaster {...props} />;
}
Usage
<ToasterWithMax position="bottom-center" max={3} />
from react-hot-toast.
Related Issues (20)
- Custom output direction HOT 1
- Support loading with "mask"
- Element type Error when using with nextjs and redux-toolkit
- Accessibility
- (Suggestion) Enhancing Web Accessibility
- Add delay to toast
- Feature Requests for warning and max toast
- Toast persists after page navigation HOT 1
- Support popover api
- Dismiss a headless toast? HOT 4
- how to support center-center? HOT 2
- TypeError: Failed to set an indexed property [0] on 'CSSStyleDeclaration': Indexed property setter is not supported.
- Linear gradient background HOT 1
- onClick event on toast.error/toast.success Icon
- Trouble with className HOT 1
- [BUG] Crashed when an element with id `target` exists HOT 2
- Cannot set textAlign
- Resolved promise unnecessarily and indefinitely maintains loading state
- Toast resides below top layer element like <dialog> when triggered from them HOT 1
- Website is down!!! HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hot-toast.