Add infinite toast (#46)

* Add infinite toast

* Update readme

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
+<Toaster duration={10000} />
+```
+
+```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.

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

test/src/app/page.tsx

@@ -58,6 +58,9 @@ export default function Home() {
       >
         Render Custom Toast
       </button>
+      <button data-testid="infinity-toast" className="button" onClick={() => toast('My Toast', { duration: Infinity })}>
+        Render Infinity Toast
+      </button>
       <Toaster />
     </>
   );

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);
+  });
 });