Quick Start

Getting started with svelte-french-toast is simple. You only need to do two things:

  1. Add the <Toaster /> component to the root of your application.
  2. Call toast() from anywhere to trigger a notification.

Example

Here is a complete example for a Svelte component.

<script>
    import toast, { Toaster } from 'svelte-french-toast';

    function handleClick() {
        toast.success('Hello, world!');
    }
</script>

<!-- Mount the Toaster component, preferably in your root layout -->
<Toaster />

<button type="button" on:click={handleClick}>
    Show Toast
</button>

How It Works

  • <Toaster />: This component is responsible for rendering all the toasts that are created. It should be placed once in your application, typically in your main +layout.svelte file, so it's available on every page.

  • toast(): This is the function you'll use to create and display toasts. You can import and call it from any component or JavaScript module in your app. It comes with several helper methods like toast.success(), toast.error(), and toast.loading() for different toast types.