Awesome

Svelte-Toasts

A highly configurable toast/notification component with individual toast state management capabilities.

Demo & Docs

https://mzohaibqc.github.io/svelte-toasts/

REPL: https://svelte.dev/repl/ff34bad88213493ab878c71497c01152?version=3.35.0

<img src="./site/public/images/dynamic-toast.gif" alt="Dynamic Toast">

Flat Toast

Bootstrap Toast

Install

npm i svelte-toasts

or if you are using yarn

yarn add svelte-toasts

Getting Started

<script>
  import { toasts, ToastContainer, FlatToast, BootstrapToast }  from "svelte-toasts";

  const showToast = () => {
    const toast = toasts.add({
      title: 'Message title',
      description: 'Message body',
      duration: 10000, // 0 or negative to avoid auto-remove
      placement: 'bottom-right',
      type: 'info',
      theme: 'dark',
      placement: 'bottom-right',
      type: 'success',
      theme,
      onClick: () => {},
      onRemove: () => {},
      // component: BootstrapToast, // allows to override toast component/template per toast
    });

    // toast.remove()

  };
</script>

<main class="flex flex-col container items-center mt-10">
	<h1 class="text-lg block text-center">Svelte Toasts</h1>
  <button on:click={showToast}>Show Toast</button>
  <ToastContainer placement="bottom-right" let:data={data}>
    <FlatToast {data} /> <!-- Provider template for your toasts -->
  </ToastContainer>
</main>

Every toast object has following structure:

{
  title: "Welcome",
  description: "Thanks for trying svelte-toasts!",
  uid: 1615153277482,
  placement: "bottom-right",
  type: "success",
  theme: "dark",
  duration: 0,
  remove: () => { /* implementation */ },
  update: () => { /* implementation */ },
  onClick: () => { console.log("Toast clicked"); }
  onRemove: () => { console.log("Toast removed"); },
  // and whatever properties that you want to add when calling toasts.add(options)
}

Below is a detail description of every property.

Helper Methods

You can use helper functions to create toast with just message argument.

toasts.success('Message body here'); // just 1 argument

toasts.success('Message Title', 'Message body here'); // 2 arguments, title, description

toasts.success('Message Title', 'Message body here', { duration: 5000 }); // 3 arguments, title, description and all other options object

Similarly, toasts.info(), toasts.warning() and toasts.error()

Docs

Store

• ToastStore

Components

• BootstrapToast
• FlatToast
• ToastContainer

ToastStore

import { toasts } from 'svelte-toasts';

Store toasts contains an array of toasts objects. It has following methods:

BootstrapToast

import { BootstrapToast } from 'svelte-toasts';

Props

Slots

Events

None.

FlatToast

import { FlatToast } from 'svelte-toasts';

Props

Slots

Events

None.

ToastContainer

import { ToastContainer } from 'svelte-toasts';

Props

Slots

Events

None.

Types

Theme

export type Theme = 'dark' | 'light';

ToastType

export type ToastType = 'success' | 'info' | 'error' | 'warning';

Placement

export type Placement =
  | 'bottom-right'
  | 'bottom-left'
  | 'top-right'
  | 'top-left'
  | 'top-center'
  | 'bottom-center'
  | 'center-center';

ToastProps

export interface ToastProps {
  uid: number;
  title?: string;
  description: string;
  duration: number;
  type: ToastType;
  theme?: Theme;
  placement: Placement;
  showProgress?: boolean;
  remove?: Function;
  update?: Function;
  onRemove?: Function;
  onClick?: Function;
}

ToastStore

export interface ToastStore extends Writable<ToastProps[]> {
  add(options: Partial<ToastProps>): ToastProps;
  success(options: Partial<ToastProps>): ToastProps;
  success(description: string): ToastProps;
  success(description: string, options: Partial<ToastProps>): ToastProps;
  success(
    title: string,
    description: string,
    options?: Partial<ToastProps>
  ): ToastProps;

  info(options: Partial<ToastProps>): ToastProps;
  info(description: string): ToastProps;
  info(description: string, options: Partial<ToastProps>): ToastProps;
  info(
    title: string,
    description: string,
    options?: Partial<ToastProps>
  ): ToastProps;

  error(options: Partial<ToastProps>): ToastProps;
  error(description: string): ToastProps;
  error(description: string, options: Partial<ToastProps>): ToastProps;
  error(
    title: string,
    description: string,
    options?: Partial<ToastProps>
  ): ToastProps;

  warning(options: Partial<ToastProps>): ToastProps;
  warning(description: string): ToastProps;
  warning(description: string, options: Partial<ToastProps>): ToastProps;
  warning(
    title: string,
    description: string,
    options?: Partial<ToastProps>
  ): ToastProps;

  getById(uid: number): ToastProps;
  clearAll(): void;
  clearLast(): void;
  setDefaults(options: Partial<ToastProps>): void;
}