Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "props" to the toast options. #48

Merged
merged 6 commits into from
Aug 21, 2023
Merged

Add "props" to the toast options. #48

merged 6 commits into from
Aug 21, 2023

Conversation

nickgraffis
Copy link
Contributor

@nickgraffis nickgraffis commented Jul 21, 2023

Proposal to allow props to be passed into Toast Options and then passed into Renderable Svelte Component.

TLDR;

Custom toast component:

// CustomToast.svelte
<script lang="ts">
  export let icon;
  export let span;
</script>

<div style="display: flex; align-items: center;">
  <span>{icon}</span>
  <span>{span}</span>
</div>

Using this component:

toast(Toast, {
  duration: 5000,
  position: 'bottom-right',
  props: {
    icon: '🐒 ',
    span: 'Hello, World'
  }
});

This is currently possible actually, it would look like this:

<script lang="ts">
  export let toast = {}
</script>

<div style="display: flex; align-items: center;">
  <span>{toast.icon}</span>
  <span>{toast.span}</span>
</div>

The only problem is then when you call the toast you would need to do something like this:

toast(Toast, {
  duration: 5000,
  position: 'bottom-right',
  //@ts-ignore
  icon: '🐒 ',
  //@ts-ignore
  span: 'Hello, World'
});

I think a better solution is to add props to Toast Options, see example above.

Typescript

A note here that toast(Toast) now infers the props coming from the Toast component, and then your props: { } are type safe based on the props in the Toast component.

@vercel
Copy link

vercel bot commented Jul 21, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
svelte-french-toast ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 24, 2023 5:47pm

@nickgraffis
Copy link
Contributor Author

nickgraffis commented Jul 21, 2023

Just noticed that it solves #33.

A good point was brought up there that it would be very cool and important to have the props be type safe, this 3rd commit should solve that.

I also took off the @typescript-eslint/no-explicit-any warning because I used Record<string, any> which is used in the SvelteComponent
@Der-Penz
Copy link

Der-Penz commented Jul 21, 2023

This would be incredibly useful! Hopefully, can this be merged soon. I need it in my project.

@kbrgl
Copy link
Owner

kbrgl commented Jul 23, 2023

Thanks for this PR! Is it backwards compatible or is it a breaking change?

Two notes:

  • I think you may need to rebase on top of master.
  • I'd prefer if you removed the blanket ignore for no-explicit-any. I prefer having to ignore per-violation. Keeps me in check 😀

Happy to merge after these changes.

@nickgraffis
Copy link
Contributor Author

Thanks for this PR! Is it backwards compatible or is it a breaking change?

Two notes:

  • I think you may need to rebase on top of master.
  • I'd prefer if you removed the blanket ignore for no-explicit-any. I prefer having to ignore per-violation. Keeps me in check 😀

Happy to merge after these changes.

Sounds good! I think good to go, let me know if there is anything else! Thanks - 🙏

@kbrgl kbrgl merged commit 509d675 into kbrgl:master Aug 21, 2023
@oscarhermoso
Copy link

@kbrgl - This is awesome, could you please publish this release?

@stepanorda
Copy link

@kbrgl Yeah, kind of confusing. It's in the docs because it's in master but you can't use it because there is no release :)

DaikoneKisu added a commit to DaikoneKisu/uchamba-frontend that referenced this pull request Jan 6, 2024
impl of toast func was needed as a workaround because there's no way to safely pass props to toasts in this version of svelte-french-toast, it's supposed to be coming in a new version: kbrgl/svelte-french-toast#48
@gprieto
Copy link

gprieto commented Mar 10, 2024

@kbrgl thanks for the great work! Could you bumb the release version to 1.3.0 and build the dist so that we can use these last features ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants