Is there any way to disable cross-page continuation of toasts?

[lil-j]

Hello,
I recently integrated this into my project. I love the way it looks and the simplicity of the promises API. However I was wondering if there was any way to disable cross-page toast continuation, so they will simply be removed when the user goes to a different page route or something of the sort similarly to other toast dependencies.

Thank you!
-Jake

[timolins]

Yes, there two ways you can achieve this.

1. Instead of adding <Toaster/> to the root of your app, you only add it to specific pages where you want toasts to appear.

2. You dismiss all toasts on navigation. For example, this could be done with useEffect.

const App = () => {

  useEffect(() => {
   // Dismiss all active toasts
   toast.dismiss()
  }, [currentRoute])

  return ( ... )
}

[lil-j]

Sweet, thank you!

[AzharUddinSheikh]

Yes, there two ways you can achieve this.

1. Instead of adding <Toaster/> to the root of your app, you only add it to specific pages where you want toasts to appear.
2. You dismiss all toasts on navigation. For example, this could be done with useEffect.

const App = () => {

  useEffect(() => {
   // Dismiss all active toasts
   toast.dismiss()
  }, [currentRoute])

  return ( ... )
}

there is a time when you want to show the toast after navigating to the page for example
when adding an item user redirect to the list item page where user see toast (message=added ${item.name} item successfully)
how could I achieve this ?