svelte-cool-toast 😎

Cool toast notifications for Svelte.

✨ Features

• 👌 Zero-dependency
• 🪶 Lightweight
• ✏️ Custom components
• 🎨 Easily themable
• 📱 Mobile friendly

🔑 License

MIT

📦 Installation

$ npm install svelte-cool-toast

🔨 Usage

Wrap your app with the ToastProvider component and then use the toast helper to create a new notification.

<script>
  import { ToastProvider, toast } from 'svelte-cool-toast';
  import "svelte-cool-toast/css/theme.css";
</script>

<ToastProvider placement="bottom-center">
  <button
    on:click={() => {
      toast('Successfully toasted!', {
        title: 'Title',
        duration: 5000,
        type: 'success'
      });
    }}
  >
    Make me a toast
  </button>
</ToastProvider>

With promises:

<script>
  import { ToastProvider, toast } from 'svelte-cool-toast';
  import "svelte-cool-toast/css/theme.css";
  import axios from "axios";
</script>

<ToastProvider placement="bottom-center">
  <button
    on:click={() => {
      toast('Saving data.', {
        usePromise: {
          promise: axios.post('/user', {
            firstName: 'Fred',
            lastName: 'Flintstone'
          }),
          success: 'Success!'
          error: 'Something went wrong.',
        }
      });
    }}
  >
    Make me a toast
  </button>
</ToastProvider>

🍱 Custom components

If you want to render a custom content component simply pass the contentComponent prop to the ToastProvider.

<!-- MyContentComponent.svelte -->

<script lang="ts">
  import type { ToastType } from 'svelte-cool-toast';

  export let title = '';
  export let message = '';
  export let type: ToastType = 'normal';
  export let usePromise: UsePromise | null = null;
  export let resolvingPromise = true;
  export let promiseError = false;
</script>

<div>
  <h3>{title}</h3>
  <p>{type}</p>
  <p>{message}</p>
</div>

<!-- App.svelte -->

<script>
  import { ToastProvider, toast } from 'svelte-cool-toast';
  import "svelte-cool-toast/css/theme.css";

  import MyContentComponent from './MyContentComponent.svelte';
</script>

<ToastProvider contentComponent={MyContentComponent}>
  <button
    on:click={() => {
      toast("Here's your toast");
    }}
  >
    Make me a toast
  </button>
</ToastProvider>

Similarly if you want to change the default dismiss button you can pass your own dismissComponent prop to the ToastProvider.

<!-- MyDismissButton.svelte -->

<div>
  <p>Close</p>
</div>

<!-- App.svelte -->

<script>
  import { ToastProvider, toast } from 'svelte-cool-toast';
  import "svelte-cool-toast/css/theme.css";

  import MyDismissButton from './MyDismissButton.svelte';
</script>

<ToastProvider dismissComponent={MyDismissButton}>
  <button
    on:click={() => {
      toast("Here's your toast");
    }}
  >
    Make me a toast
  </button>
</ToastProvider>

🎨 Theming

You can use your own styles for the toast container by targeting the .toast-container class.

<!-- App.svelte -->

<script>
  import { ToastProvider, toast } from 'svelte-cool-toast';
</script>

<ToastProvider>
  <button
    on:click={() => {
      toast("Here's your toast");
    }}
  >
    Make me a toast
  </button>
</ToastProvider>

<style global>
  .toast-container {
    background-color: #9aeda7;
  }
</style>