Svelte French Toast

Overview

svelte-french-toast is a lightweight and customizable toast notification library built for Svelte. It is a port of Timo Lins’s react-hot-toast library and aims to provide buttery smooth notifications for Svelte applications.

Features

• Lightweight: svelte-french-toast is designed to be lightweight and optimized for performance.
• Customizable: The library offers a range of customization options, allowing you to tailor the appearance and behavior of the toast notifications to fit your specific needs.
• Beautiful by Default: svelte-french-toast is designed to provide beautiful toast notifications out of the box, requiring minimal configuration to achieve an appealing visual style.

Installation

To install svelte-french-toast, you can use your preferred package manager. Here is an example using npm:

npm install svelte-french-toast

Basic Usage

To use svelte-french-toast, you need to mount a <Toaster /> component at the top level of your Svelte app. This component will handle the rendering of toast notifications. You can then use the toast API to display toasts in your app.

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

<Toaster />

<button on:click={() => toast('Hello World!')}>Show Toast</button>

For more examples of how to use svelte-french-toast, you can refer to the official website.

Summary

svelte-french-toast is a Svelte library that provides customizable and beautiful toast notifications. With its lightweight design and easy-to-use API, it allows developers to easily add toast notifications to their Svelte applications. By mounting the <Toaster /> component and utilizing the toast API, developers can display toast notifications with minimal effort.