Close custom toasts

src/state.ts

@@ -36,6 +36,7 @@ class Observer {
       message?: string | React.ReactNode;
       type?: ToastTypes;
       promise?: PromiseT;
+      jsx?: React.ReactElement;
     },
   ) => {
     const { message, ...rest } = data;
@@ -149,10 +150,9 @@ class Observer {
     return id;
   };
 
-  // We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()?
   custom = (jsx: (id: number | string) => React.ReactElement, data?: ExternalToast) => {
     const id = data?.id || toastsCounter++;
-    this.publish({ jsx: jsx(id), id, ...data });
+    this.create({ jsx: jsx(id), id, ...data });
     return id;
   };
 }

website/src/components/Hero/index.tsx

@@ -3,6 +3,21 @@ import { toast } from 'sonner';
 import styles from './hero.module.css';
 import Link from 'next/link';
 
+export const headlessToast = (message: string) => {
+  toast.custom(
+    (t) => (
+      <div>
+        {message}
+        <button onClick={() => toast.dismiss(t)}>x</button>
+      </div>
+    ),
+    {
+      // dismissible: true
+      // onDismiss: (t) => toast.dismiss(t.id)
+    },
+  );
+};
+
 export const Hero = () => {
   return (
     <div className={styles.wrapper}>
@@ -17,6 +32,7 @@ export const Hero = () => {
         <button
           data-primary=""
           onClick={() => {
+            headlessToast('headless toast');
             toast('Sonner', {
               description: 'An opinionated toast component for React.',
             });
@@ -25,6 +41,7 @@ export const Hero = () => {
         >
           Render a toast
         </button>
+        <button onClick={() => toast.dismiss()}>dismiss all</button>
         <a className={styles.button} href="https://github.com/emilkowalski/sonner" target="_blank">
           GitHub
         </a>

website/src/pages/toast.mdx

@@ -162,6 +162,12 @@ const toastId = toast('Event has been created');
 toast.dismiss(toastId);
 ```
 
+You can also dismiss all toasts at once by calling `toast.dismiss()` without an id.
+
+```jsx
+toast.dismiss();
+```
+
 ## API Reference
 
 | Property    |                                              Description                                               |        Default |