allow to pass jsx to actions (#379)

* allow to pass jsx to actions

* Allow to pass jsx as actions

* update docs

Author: emilkowalski

.github/pull-request-template.md

@@ -1,11 +1,11 @@
-### Issue 😱:
+### Issue:
 
 Closes https://github.com/emilkowalski/sonner/issues/
 
-### What has been done ✅:
+### What has been done:
 
 - [ ]
 
-### Screenshots/Videos 🎥:
+### Screenshots/Videos:
 
 N/A

src/index.tsx

@@ -3,12 +3,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import DOMPurify from "dompurify";
+import DOMPurify from 'dompurify';
 import { getAsset, Loader } from './assets';
 import { useIsDocumentHidden } from './hooks';
 import { toast, ToastState } from './state';
 import './styles.css';
-import type { ExternalToast, HeightT, ToasterProps, ToastProps, ToastT, ToastToDismiss } from './types';
+import {
+  isAction,
+  type ExternalToast,
+  type HeightT,
+  type ToasterProps,
+  type ToastProps,
+  type ToastT,
+  type ToastToDismiss,
+} from './types';
 
 // Visible toasts amount
 const VISIBLE_TOASTS_AMOUNT = 3;
@@ -56,7 +64,7 @@ const Toast = (props: ToastProps) => {
     descriptionClassName = '',
     duration: durationFromToaster,
     position,
-    gap = GAP,
+    gap,
     loadingIcon: loadingIconProp,
     expandByDefault,
     classNames,
@@ -375,16 +383,16 @@ const Toast = (props: ToastProps) => {
         <>
           {toastType || toast.icon || toast.promise ? (
             <div data-icon="" className={cn(classNames?.icon)}>
-              {toast.promise || (toast.type === 'loading' && !toast.icon)
-                ? toast.icon || getLoadingIcon()
-                : null}
+              {toast.promise || (toast.type === 'loading' && !toast.icon) ? toast.icon || getLoadingIcon() : null}
               {toast.type !== 'loading' ? toast.icon || icons?.[toastType] || getAsset(toastType) : null}
             </div>
           ) : null}
 
           <div data-content="" className={cn(classNames?.content)}>
-            <div data-title="" className={cn(classNames?.title, toast?.classNames?.title)}
-                 dangerouslySetInnerHTML={sanitizeHTML(toast.title as string)}
+            <div
+              data-title=""
+              className={cn(classNames?.title, toast?.classNames?.title)}
+              dangerouslySetInnerHTML={sanitizeHTML(toast.title as string)}
             ></div>
             {toast.description ? (
               <div
@@ -399,29 +407,35 @@ const Toast = (props: ToastProps) => {
               ></div>
             ) : null}
           </div>
-          {toast.cancel ? (
+          {React.isValidElement(toast.cancel) ? (
+            toast.cancel
+          ) : toast.cancel && isAction(toast.cancel) ? (
             <button
               data-button
               data-cancel
               style={toast.cancelButtonStyle || cancelButtonStyle}
               onClick={(event) => {
+                // We need to check twice because typescript
+                if (!isAction(toast.cancel)) return;
                 if (!dismissible) return;
                 deleteToast();
-                if (toast.cancel?.onClick) {
-                  toast.cancel.onClick(event);
-                }
+                toast.cancel.onClick(event);
               }}
               className={cn(classNames?.cancelButton, toast?.classNames?.cancelButton)}
             >
               {toast.cancel.label}
             </button>
           ) : null}
-          {toast.action ? (
+          {React.isValidElement(toast.action) ? (
+            toast.action
+          ) : toast.action && isAction(toast.action) ? (
             <button
               data-button=""
               style={toast.actionButtonStyle || actionButtonStyle}
               onClick={(event) => {
-                toast.action?.onClick(event);
+                // We need to check twice because typescript
+                if (!isAction(toast.action)) return;
+                toast.action.onClick(event);
                 if (event.defaultPrevented) return;
                 deleteToast();
               }}
@@ -465,7 +479,7 @@ const Toaster = (props: ToasterProps) => {
     visibleToasts = VISIBLE_TOASTS_AMOUNT,
     toastOptions,
     dir = getDocumentDirection(),
-    gap,
+    gap = GAP,
     loadingIcon,
     icons,
     containerAriaLabel = 'Notifications',
@@ -703,4 +717,3 @@ const Toaster = (props: ToasterProps) => {
   );
 };
 export { toast, Toaster, type ExternalToast, type ToastT };
-

src/types.ts

@@ -40,6 +40,12 @@ export interface ToastIcons {
   loading?: React.ReactNode;
 }
 
+interface Action {
+  label: string;
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  actionButtonStyle?: React.CSSProperties;
+}
+
 export interface ToastT {
   id: number | string;
   title?: string | React.ReactNode;
@@ -53,14 +59,8 @@ export interface ToastT {
   duration?: number;
   delete?: boolean;
   important?: boolean;
-  action?: {
-    label: React.ReactNode;
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  };
-  cancel?: {
-    label: React.ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  };
+  action?: Action | React.ReactNode;
+  cancel?: Action | React.ReactNode;
   onDismiss?: (toast: ToastT) => void;
   onAutoClose?: (toast: ToastT) => void;
   promise?: PromiseT;
@@ -74,6 +74,10 @@ export interface ToastT {
   position?: Position;
 }
 
+export function isAction(action: Action | React.ReactNode): action is Action {
+  return (action as Action).label !== undefined && typeof (action as Action).onClick === 'function';
+}
+
 export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
 export interface HeightT {
   height: number;

website/src/pages/toast.mdx

@@ -34,7 +34,7 @@ To render a toast on initial page load it is required that the function `toast()
 ```jsx
 setTimeout(() => {
   toast('My toast on a page load');
-})
+});
 ```
 
 ## Creating toasts
@@ -68,6 +68,14 @@ toast('My action toast', {
 });
 ```
 
+You can also render jsx as your action.
+
+```jsx
+toast('My action toast', {
+  action: <Button onClick={() => console.log('Action!')}>Action</Button>,
+});
+```
+
 ### Cancel
 
 Renders a secondary button, clicking it will close the toast and run the callback passed via `onClick`.
@@ -81,6 +89,14 @@ toast('My cancel toast', {
 });
 ```
 
+You can also render jsx as your action.
+
+```jsx
+toast('My cancel toast', {
+  action: <Button onClick={() => console.log('Cancel!')}>Cancel</Button>,
+});
+```
+
 ### Promise
 
 Starts in a loading state and will update automatically after the promise resolves or fails.