kbrgl / svelte-french-toast

🍞🥂 Buttery smooth toast notifications for Svelte
https://svelte-french-toast.vercel.app/
MIT License
808 stars 28 forks source link

Feature Request Passing props to rich text content #33

Open ElijahJohnson5 opened 1 year ago

ElijahJohnson5 commented 1 year ago

Hello, I would like to be able to pass additional props when using a Svelte component as the message

JGhignatti commented 1 year ago

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.