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

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

| Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :-------------------------------------- | -------------------- | ---------------------------- | | theme | let | No | Theme | 'light' | Default theme for all toasts | | data | let | No | ToastProps | {} | Default theme for all toasts |

Slots

| Slot name | Default | Props | Fallback | | :--------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | close-icon | No | -- | <svg xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__close-icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true" > <path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> | | extra | No | -- | -- | | icon | No | -- | Svg icons based on type |

Events

None.

FlatToast

import { FlatToast } from 'svelte-toasts';

Props

| Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :--------------------------------------- | -------------------- | ---------------------------- | | theme | let | No | Theme | 'light' | Default theme for all toasts | | data | let | No | ToastProps | {} | Default theme for all toasts |

Slots

| Slot name | Default | Props | Fallback | | :--------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | close-icon | No | -- | <svg xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__close-icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true" > <path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z" /> </svg> | | extra | No | -- | -- | | icon | No | -- | Svg icons based on type |

Events

None.

ToastContainer

import { ToastContainer } from 'svelte-toasts';

Props

| Prop name | Kind | Reactive | Type | Default value | Description | | :----------- | :--------------- | :------- | :------------------------------------- | --------------------------- | ---------------------------------------------------------------------- | | theme | let | No | Theme | 'dark' | Default theme for all toasts | | placement | let | No | Placement | 'bottom-right' | Default placement for all toasts | | type | let | No | ToastType | 'info' | Default type of all toasts | | showProgress | let | No | boolean | false | Show progress if showProgress is true and duration is greater then 0 | | duration | let | No | number | 3000 | Default duration for all toasts to auto close. 0 to disable auto close | | width | let | No | 'string' | '320px' | Width of all toasts |

Slots

| Slot name | Default | Props | Fallback | | :-------- | :------ | :------------------------------------------------ | :------- | | -- | Yes | { data: ToastProps } | -- |

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;
}