Why're we exporting Toaster from two places 'sonner.tsx' & 'toaster.tsx'

[imtheaman]

i used Toaster exported by sonner.tsx and toast wasn't showing up, then i used toaster.tsx's export and it shows up. why do we have two exports of the same component?

[jrTilak]

Well @imtheaman , you are right, we have two exports called Toaster but they are not the same components.

Toaster and Sooner are two different components but they have almost same functionality due to which you are likely to use one of them, in your project.

Sooner:

To use sooner , you must import Toaster and toast like this:

import { Toaster } from "@/components/ui/sonner"

import { toast } from "sonner"

toast("Event has been created.")

Toaster

To use sooner , you must import Toaster and toast like this:

import { Toaster } from "@/components/ui/toaster"

import { useToast } from "@/components/ui/use-toast"

toast({
   title: "Scheduled: Catch up",
   description: "Friday, February 10, 2023 at 5:57 PM",
})

Toaster and Sooner are not related to each other and you don't need to install toaster to use sooner or vice versa.

In case

In case, if you want to use both of the toaster and sooner, you can use namespace import to avoid the conflicst.

import { toast } from './components/ui/use-toast'
import { toast as sonner } from 'sonner'
import { Button } from './components/ui/button'
import { Toaster as Sonner } from './components/ui/sonner'
import { Toaster } from './components/ui/toaster'

export default function ToastSimple() {
  return (
    <div className={`m-auto flex h-screen w-screen items-center justify-center gap-4`}>
      <Button
        onClick={() =>
          toast({
            title: 'This is a toast',
            description: 'This is a toast description',
          })
        }
      >
        Toast
      </Button>
      <Button onClick={() => sonner('This is a sooner not a toast')}>Sonner</Button>

      //include these in you root or wherever you want.
      <Toaster />
      <Sonner />
    </div>
  )
}

probable-spoon-p4r4ggxg7rqc6rjr-5000.app.github.dev.-.Google.Chrome.2024-01-08.18-25-52.mp4

In case, if you are not satisfied with the answer, you can comment down.

[imtheaman]

usecase of Sonner ain' clear yet

[jrTilak]

usecase of Sonner ain' clear yet

Yeah, I think both are kind of same, you can use one of them according to your preferences. 😉

[shadcn]

It's either or. You can pick between sonner or toast. You don't want two toast component in the same project.

[nareshbhatia]

I need a Toast component for my app. How do I choose between sonner and toast? Is there something that one does better than the other? I want flexibility in content, e.g. not just title and description but also an icon on the left.

[luchillo17]

Sonner handles multi toast more elegantly, stacking them in a staggered way and expanding all active toasts on hover.

[chrisidakwo]

Is there something that one does better than the other? I want flexibility in content, e.g. not just title and description but also an icon on the left.

Nope, they both display messages with actions and icons and colors, etc. It's all up to you! They both can display a title, description, and icon. Again, it's all up to you.

The only visual difference is the design. Some people might prefer the design of Sonner over Toast and some other person might prefer the reverse. Hence, just go with whichever one you like best - especially if you're not bound by a design.

I need a Toast component for my app. How do I choose between sonner and toast?

How do you choose? I'm not sure what you wish to get as a response to the question, but I reckon you can just install whichever one of them you prefer to use. I'd argue that's how to choose.

[nareshbhatia]

Thank you, @chrisidakwo. That's exactly what I was looking for. I will play with both APIs and figure out what I like better.

[Bubbleinpit]

I think from the perspective of an FE developer, the fundamental difference is that you can use sonner outside a React component. If you adopt toaster, you have to call the useToast hook to get the toast function.

[luchillo17]

Are you sure about that? afaik Sonner is React-specific, the only real difference I see (other than subtle style differences) is that Sonner handles parallel/multiple notifications better, it staggers the cards behind one another and expands them on hover, so I consider Sonner the superior choice.

[Bubbleinpit]

@luchillo17 Thank you for pointing out the huge difference on the user interface! In addistion, Sonner is of course React-specific. What I mean is that Sonner component only needs to be imported once in the top-level component, then Sonner toast function can be called anywhere in more than just React components.

[luchillo17]

Mixing React with non-React is not a very common case, but sure, as long as the React wrappers wrap the non-React logic, you can call the Sonner toasts from anywhere, while the other uses a custom hook, though the function from that hook can be passed down to non-React logic as well, of course, it would be non-trivial.