From 42400e9d36c0cb6c2c144d10e0747b004d0b25be Mon Sep 17 00:00:00 2001 From: Muhammad Rizqi Tsani <68275535+rizqitsani@users.noreply.github.com> Date: Fri, 23 Feb 2024 17:36:00 +0700 Subject: [PATCH] Add hooks to show active toasts (#347) --- src/index.tsx | 37 ++++++++++++++++++++++++++++++++++--- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index c197836..7dad581 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -437,6 +437,33 @@ function getDocumentDirection(): ToasterProps['dir'] { return dirAttribute as ToasterProps['dir']; } +function useSonner() { + const [activeToasts, setActiveToasts] = React.useState([]); + + React.useEffect(() => { + return ToastState.subscribe((toast) => { + setActiveToasts((currentToasts) => { + if ('dismiss' in toast && toast.dismiss) { + return currentToasts.filter((t) => t.id !== toast.id); + } + + const existingToastIndex = currentToasts.findIndex((t) => t.id === toast.id); + if (existingToastIndex !== -1) { + const updatedToasts = [...currentToasts]; + updatedToasts[existingToastIndex] = { ...updatedToasts[existingToastIndex], ...toast }; + return updatedToasts; + } else { + return [toast, ...currentToasts]; + } + }); + }); + }, []); + + return { + toasts: activeToasts, + }; +} + const Toaster = (props: ToasterProps) => { const { invert, @@ -485,8 +512,12 @@ const Toaster = (props: ToasterProps) => { const isFocusWithinRef = React.useRef(false); const removeToast = React.useCallback( - (toast: ToastT) => setToasts((toasts) => toasts.filter(({ id }) => id !== toast.id)), - [], + (toastToRemove: ToastT) => { + if (!toasts.find((toast) => toast.id === toastToRemove.id)?.delete) { + ToastState.dismiss(toastToRemove.id); + } + }, + [toasts], ); React.useEffect(() => { @@ -690,4 +721,4 @@ const Toaster = (props: ToasterProps) => { ); }; -export { toast, Toaster, type ToastT, type ExternalToast }; +export { toast, Toaster, type ToastT, type ExternalToast, useSonner };