How to pass Component into ToastBar?

[winston0410]

Is ToastBar intended to be called separately, or is using Component in ToastBar an old API?

svelte-french-toast/src/lib/components/ToastBar.svelte

Line 29 in c71e38a

{#if Component}

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:

svelte-french-toast/src/lib/components/Toaster.svelte

Lines 6 to 11 in c71e38a

	export let reverseOrder = false;
	export let position: ToastPosition = 'top-center';
	export let toastOptions: ToastOptions | undefined = undefined;
	export let gutter = 8;
	export let containerStyle: string | undefined = undefined;
	export let containerClassName: string | undefined = undefined;

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

svelte-french-toast/src/lib/components/Toaster.svelte

Line 35 in c71e38a

<ToastWrapper {toast} setHeight={(height) => handlers.updateHeight(toast.id, height)} />

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