Lightweight, customizable, and beautiful by default.
Inspired by
React Hot Toast.
Emoji Support
Customizable
Promise API
Pause on hover
Accessible
Headless use
1. Install
npm install svelte-french-toast
2. Mount and use
<script>
import { onMount } from 'svelte';
import toast, { Toaster } from 'svelte-french-toast';
onMount(() => {
toast.success("It works!");
})
</script>
<Toaster />
toast.success('Successfully toasted!')
toast.error("This didn't work.")
toast.promise(
saveSettings(settings),
{
loading: 'Saving...',
success: 'Settings saved!',
error: 'Could not save.',
}
);
toast(
"This toast is super big. I don't think anyone could eat it in one bite.\n\nIt's larger than you expected. You eat it but it does not seem to get smaller.",
{
duration: 6000,
}
);
toast('Good Job!', {
icon: '👏',
});
toast('Hello Darkness!', {
icon: '👏',
style: 'border-radius: 200px; background: #333; color: #fff;'
});
<script>
import toast_ from 'svelte-french-toast';
export let toast;
// Use this component in your app:
// toast(RichContent, { props: { someProp: '⭐' }})
</script>
<script>
export let someProp;
</script>
<span>
Custom and <b>bold</b> with props like {someProp}!
<button on:click={() => toast_.dismiss(toast.id)}>Dismiss</button>
</span>
toast.success('Look at me!', {
style: 'border: 1px solid #713200; padding: 16px; color: #713200;',
iconTheme: {
primary: '#713200',
secondary: '#FFFAEE'
}
});
toast.success('Always at the bottom.', {
position: "bottom-center"
})
© 2022 svelte-french-toast · Built by Kabir Goel