How to pass Component into ToastBar?

[winston0410]

Is ToastBar intended to be called separately, or is using Component in ToastBar an old API? https://github.com/kbrgl/svelte-french-toast/blob/c71e38a565966665bb56787e28caccad1a5ea152/src/lib/components/ToastBar.svelte#L29

I have seen your blog post, which seems to suggest passing Component to ToastBar from Toaster, but from the current source it does not accepting a Component props: https://github.com/kbrgl/svelte-french-toast/blob/c71e38a565966665bb56787e28caccad1a5ea152/src/lib/components/Toaster.svelte#L6-L11

If that is indeed an old API, how can I use custom component as the toast?

[kbrgl]

The API isn't old, you're definitely on the right track. But I haven't really gotten around to documenting the more obscure use cases yet (sorry about that!). In this case, it looks like you found a mistake—I did not implement custom children for the Toaster, which React Hot Toast allows.

So if you're trying to do a custom component, it looks like you've got one option until a fix is out: useToaster(). The API is pretty close to React Hot Toast's useToaster hook, which you can find here.

Let me know if this makes sense, or if something doesn't work.

[winston0410]

No worry it makes perfect sense. One of a simple improvement I can think of, is to use <slot> and $$slots here https://github.com/kbrgl/svelte-french-toast/blob/c71e38a565966665bb56787e28caccad1a5ea152/src/lib/components/Toaster.svelte#L35

So user can still create a headless toast, but using the default toaster so there is one less step to take. It is a headless approach, so user will need to implement the position css themselves.

What do you think about this? if you are happy I can create a PR