diff --git a/__tests__/src/components/Toasts.test.tsx b/__tests__/src/components/Toasts.test.tsx
index c14fc8a..6be92fb 100644
--- a/__tests__/src/components/Toasts.test.tsx
+++ b/__tests__/src/components/Toasts.test.tsx
@@ -32,7 +32,7 @@ describe('', () => {
afterEach(() => {
jest.clearAllMocks();
act(() => {
- toast.dismiss();
+ toast.remove();
});
});
@@ -135,4 +135,18 @@ describe('', () => {
const toastElement = getByText('Top Toast');
expect(toastElement).toBeTruthy();
});
+
+ it('applies toast limit from globalLimit prop', () => {
+ const { getByText, queryByText } = render();
+
+ act(() => {
+ toast('Toast 1', { id: '1' });
+ toast('Toast 2', { id: '2' });
+ toast('Toast 3', { id: '3' });
+ });
+
+ expect(getByText('Toast 2')).toBeTruthy();
+ expect(getByText('Toast 3')).toBeTruthy();
+ expect(queryByText('Toast 1')).toBeNull();
+ });
});
diff --git a/src/components/Toasts.tsx b/src/components/Toasts.tsx
index f906f2e..8aa5409 100644
--- a/src/components/Toasts.tsx
+++ b/src/components/Toasts.tsx
@@ -39,6 +39,7 @@ type Props = {
};
globalAnimationType?: ToastAnimationType;
globalAnimationConfig?: ToastAnimationConfig;
+ globalLimit?: number;
defaultPosition?: ToastPosition;
defaultDuration?: number;
fixAndroidInsets?: boolean;
@@ -57,6 +58,7 @@ export const Toasts: FunctionComponent = ({
globalAnimationConfig,
defaultPosition,
defaultDuration,
+ globalLimit,
fixAndroidInsets = true,
}) => {
const { toasts, handlers } = useToaster({
@@ -64,6 +66,7 @@ export const Toasts: FunctionComponent = ({
duration: defaultDuration,
position: defaultPosition,
animationType: globalAnimationType,
+ limit: globalLimit,
});
const { startPause, endPause } = handlers;
const insets = useSafeAreaInsets();
diff --git a/src/core/store.ts b/src/core/store.ts
index 69173b0..e849185 100644
--- a/src/core/store.ts
+++ b/src/core/store.ts
@@ -87,7 +87,7 @@ export const reducer = (state: State, action: Action): State => {
case ActionType.ADD_TOAST:
return {
...state,
- toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+ toasts: [action.toast, ...state.toasts],
};
case ActionType.UPDATE_TOAST:
@@ -187,6 +187,7 @@ const defaultTimeouts: {
export const useStore = (toastOptions: DefaultToastOptions = {}): State => {
const [state, setState] = useState(memoryState);
+
useEffect(() => {
listeners.push(setState);
return () => {
@@ -197,6 +198,8 @@ export const useStore = (toastOptions: DefaultToastOptions = {}): State => {
};
}, [state]);
+ const limit = toastOptions?.limit ?? TOAST_LIMIT;
+
const mergedToasts = state.toasts
.filter(
(t) =>
@@ -204,6 +207,7 @@ export const useStore = (toastOptions: DefaultToastOptions = {}): State => {
t.providerKey === toastOptions?.providerKey ||
t.providerKey === 'PERSISTS'
)
+ .slice(0, limit)
.map((t) => ({
...toastOptions,
...toastOptions[t.type],
diff --git a/src/core/types.ts b/src/core/types.ts
index 0bee466..48ec478 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -62,6 +62,7 @@ export interface Toast {
height?: number;
width?: number;
maxWidth?: number;
+ limit?: number;
onPress?: (toast: Toast) => void;
onHide?: (toast: Toast, reason: DismissReason) => void;
onShow?: (toast: Toast) => void;
@@ -90,6 +91,7 @@ export type ToastOptions = Partial<
| 'styles'
| 'height'
| 'width'
+ | 'limit'
| 'customToast'
| 'disableShadow'
| 'providerKey'
diff --git a/website/docs/components/toasts.md b/website/docs/components/toasts.md
index 0322b82..50558ff 100644
--- a/website/docs/components/toasts.md
+++ b/website/docs/components/toasts.md
@@ -28,6 +28,12 @@ Set the global animation config for all toasts. This can be overridden by the to
```
+### globalLimit
+`number | undefined`
+
+Set the global limit for the number of toasts that can be shown at once. When this limit is reached, the oldest toast will be removed to make room for the new one.
+
+
### defaultPosition
`ToastPosition | undefined`