diff --git a/README.md b/README.md index 6b858e3..745a7c9 100644 --- a/README.md +++ b/README.md @@ -215,6 +215,25 @@ You can also use the dismiss method without the id to dismiss all toasts. toast.dismiss(); ``` +### Programmatically remove toast + +You can change the duration of each toast by using the `duration` property, or change the duration of all toasts like this: + +```jsx + +``` + +```jsx +toast('Event has been created', { + duration: 10000, +}); + +// Persisent toast +toast('Event has been created', { + duration: Infinity, +}); +``` + ## Keyboard focus You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key. diff --git a/src/index.tsx b/src/index.tsx index ea17cb7..4dbf881 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -157,7 +157,7 @@ const Toast = (props: ToastProps) => { }, [toast, removeToast, setHeights, offset]); React.useEffect(() => { - if (toast.promise && promiseStatus === 'loading') return; + if ((toast.promise && promiseStatus === 'loading') || toast.duration === Infinity) return; let timeoutId: NodeJS.Timeout; // Pause the timer on each hover diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx index cc48301..0cd05db 100644 --- a/test/src/app/page.tsx +++ b/test/src/app/page.tsx @@ -58,6 +58,9 @@ export default function Home() { > Render Custom Toast + ); diff --git a/test/tests/basic.spec.ts b/test/tests/basic.spec.ts index 12f8b1c..7d1d956 100644 --- a/test/tests/basic.spec.ts +++ b/test/tests/basic.spec.ts @@ -49,4 +49,12 @@ test.describe('Basic functionality', () => { await timeout; await expect(page.locator('[data-sonner-toast]')).toHaveCount(1); }); + + test('toast is not removed if duration is set to infinity', async ({ page }) => { + await page.getByTestId('infinity-toast').click(); + await page.hover('[data-sonner-toast]'); + const timeout = new Promise((resolve) => setTimeout(resolve, 5000)); + await timeout; + await expect(page.locator('[data-sonner-toast]')).toHaveCount(1); + }); });