svelte-french-toast
svelte-french-toast copied to clipboard
Feature Request Passing props to rich text content
Hello, I would like to be able to pass additional props when using a Svelte component as the message
Hi,
If the Toast
interface at lib/core/types.ts
gets changed to have:
props?: Record<string, unknown>;
and the ToastOptions
adds the props
property in the Pick
(same file):
export type ToastOptions = Partial<
Pick<
Toast,
| 'id'
| 'icon'
| 'duration'
| 'ariaProps'
| 'className'
| 'style'
| 'position'
| 'iconTheme'
| 'props'
>
>;
and, last but not least, the ToastMessage.svelte
gets changed to pass the props down:
<svelte:component this={toast.message} {toast} {...toast.props}/>
we end up being able to:
<!-- RichContent.svelte -->
<script lang="ts">
export let text: string;
</script>
<b>{text}</b>
and then:
<!-- Other component -->
toast(RichContent, { props: { text: 'My text' } });
The only downside is that props
is not type safe as its type is Record<string, unknown>
. I tried a little to get it to be dynamic set if the message passed is a SvelteCompoent
with:
import type { ComponentProps } from 'svelte';
type Props<T> = ComponentProps<T>;
but so far I failed to have that generics working without a hard impact in the rest of the code that relies on the Toast
interface.