svelte-cool-toast 😎
Cool toast notifications for Svelte.
✨ Features
👌 Zero-dependency🪶 Lightweight✏️ Custom components🎨 Easily themable📱 Mobile friendly
🔑 License
📦 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>