{`/>`}
diff --git a/playground/src/components/constants.ts b/playground/src/components/constants.ts
index c5279417..de4b0ec7 100644
--- a/playground/src/components/constants.ts
+++ b/playground/src/components/constants.ts
@@ -32,6 +32,10 @@ export const flags = [
{
id: 'draggable',
label: 'Allow to drag and close the toast'
+ },
+ {
+ id: 'stacked',
+ label: 'Stacked'
}
];
diff --git a/src/addons/use-notification-center/NotificationCenter.cy.tsx b/src/addons/use-notification-center/NotificationCenter.cy.tsx
index 2ffe1962..b8161c09 100644
--- a/src/addons/use-notification-center/NotificationCenter.cy.tsx
+++ b/src/addons/use-notification-center/NotificationCenter.cy.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { toast, ToastContainer } from 'react-toastify';
+import { toast, ToastContainer } from '../../';
import { NotificationCenterItem, useNotificationCenter, UseNotificationCenterParams } from './useNotificationCenter';
function TestComponent(props: UseNotificationCenterParams) {
diff --git a/src/addons/use-notification-center/useNotificationCenter.ts b/src/addons/use-notification-center/useNotificationCenter.ts
index 7e69ec38..a50d0c28 100644
--- a/src/addons/use-notification-center/useNotificationCenter.ts
+++ b/src/addons/use-notification-center/useNotificationCenter.ts
@@ -1,5 +1,5 @@
import { useState, useEffect, useRef } from 'react';
-import { toast, ToastItem, Id } from 'react-toastify';
+import { toast, ToastItem, Id } from '../..';
type Optional
= Pick, K> & Omit;
diff --git a/src/components/ToastContainer.tsx b/src/components/ToastContainer.tsx
index a3d22b2c..e38974ab 100644
--- a/src/components/ToastContainer.tsx
+++ b/src/components/ToastContainer.tsx
@@ -21,6 +21,7 @@ export const defaultProps: ToastContainerProps = {
draggableDirection: Direction.X,
role: 'alert',
theme: 'light',
+ stackLimit: 10,
'aria-label': 'Notifications Alt+T',
hotKeys: e => e.altKey && e.code === 'KeyT'
};
@@ -31,6 +32,7 @@ export function ToastContainer(props: ToastContainerProps) {
...props
};
const stacked = props.stacked;
+ const stackLimit = props.stackLimit > 1 ? props.stackLimit : defaultProps.stackLimit;
const [collapsed, setIsCollapsed] = useState(true);
const containerRef = useRef(null);
const { getToastToRender, isToastActive, count } = useToastContainer(containerProps);
@@ -81,9 +83,11 @@ export function ToastContainer(props: ToastContainerProps) {
node.style.setProperty('--y', `${isTop ? y : y * -1}px`);
node.style.setProperty('--g', `${gap}`);
node.style.setProperty('--s', `${1 - (collapsed ? prevS : 0)}`);
-
- usedHeight += node.offsetHeight;
prevS += 0.025;
+
+ if (!(stackLimit && i >= stackLimit - 1 && collapsed)) {
+ usedHeight += node.offsetHeight;
+ }
});
}
}, [collapsed, count, stacked]);
diff --git a/src/core/toast.cy.tsx b/src/core/toast.cy.tsx
index f522d0a0..947ddecc 100644
--- a/src/core/toast.cy.tsx
+++ b/src/core/toast.cy.tsx
@@ -689,3 +689,21 @@ describe('with stacked container', () => {
cy.findByText('hello 3').should('exist').and('be.visible');
});
});
+
+describe('with stacked container and stack limit', () => {
+ it('render toasts', () => {
+ cy.mount();
+ toast('hello 1');
+ toast('hello 2');
+ toast('hello 3');
+
+ cy.wait(500);
+
+ cy.findByText('hello 1').should('exist').and('not.be.visible');
+ cy.findByText('hello 2').should('exist').and('not.be.visible');
+ cy.findByText('hello 3').should('exist').and('be.visible');
+
+ // Verify we have exactly 3 toasts in total
+ cy.get('.Toastify__toast').should('have.length', 3);
+ });
+});
diff --git a/src/types.ts b/src/types.ts
index 72109537..7f52728d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -268,6 +268,11 @@ export interface ToastContainerProps extends CommonOptions, Pick