fkhadra / fkhadra/react-toastify
[Bug] Elements don't respect stacked layout in `ToastContainer`
- Dominant language
- TypeScript
- Stars
- 13.4k
- Forks
- 741
- PR merge metrics
- No merged PRs in 30d
Description
I would like to report a bug in the current implementation of the stacked toasts:
I have a `ToastContainer` with the following config:
```ts
```
And for this test I use a periodic dispatcher of toasts:
```ts
useEffect(() => {
let counter = 0;
setInterval(() => {
toast(`No ${counter}. This is notification number: ${counter}`, { hideProgressBar: true });
counter++;
}, 1000);
}, []);
```
The result is illustrated in the following video:

Here is also a codesandbox:
https://codesandbox.io/p/sandbox/gdp6cq
When a toast is closed (regardless of method: user action/expiration time) and a new toast is added from a queue (imposed by the `limit=3` prop) it feels like they do not respect the `stacked` property of ToastContainer
Contributor guide
Research direction
Start with the ToastContainer stacked-layout behavior and reproduce the sequence in the linked CodeSandbox: show three stacked toasts, close one, then let a queued toast appear under limit={3}. Done means queued toasts preserve the stacked layout after either user dismissal or expiration; verify both paths with the supplied periodic dispatcher.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100