svelte-toasts is yet another toast library for Svelte, written with Typescript, TailwindCSS, and formatted with Prettier.

View the demo.

TODO: Installation

Import the ToastWrapper component, with optional position, toastDefaults and animationDefaults.

<script lang="ts">  import { AnimationOptions, Position, ToastOptions, ToastWrapper } from '';   const toastDefaults: ToastOptions = {  ...  };   const animationDefaults: AnimationOptions = {  ...  }; </script> ... <ToastWrapper position="end" {toastDefaults} {animationDefaults} />

Import the toasts store and push as much toast as you desire.

<script lang="ts"> import { toasts } from '';  toasts.push('Toast Me!'); </script>

/**  * Remove all toasts from the store. Sets the fade transition duration to 0 beforehand, to ensure toasts  * are cleared instantly after awaiting 'tick'.  */ const clear = async () => { ... } /**  * Removes a toast from the store based on the given {@link id}. This can relate to the id number of  * a toast or {@link ToastPop}. 'new' removes the latest toast, whereas 'old' removes the oldest.  * @param {number | ToastPop} id The id of the toast to remove, or either 'new' or 'old'.  */ const pop = (id: number | ToastPop) => { ... } /**  * Push a new toast to the store.  * @param {string} message The message for the toast to display.  * @param {ToastOptions} opts (optional)  * @returns {number} Id of the toast.  */ const push = (message: string, opts?: ToastOptions): number => { ... }

toasts.push('...', { auto: boolean;	border: 'bottom' | 'end' | 'start' | 'top' | 'all';	duration: number;	icon: boolean, pausable: boolean, type: 'error' | 'info' | 'success' | 'warning'; });

• auto: Whether or not the toast is automatically dismissed after duration has elapsed.
  • default: true
• border: Position of the toasts border.
  • default: start
• duration: Amount of time in ms to elapse before dismissing, in conjunction with auto.
  • default: 3000
• icon: Whether or not to display an icon related to type.
  • default: true
• pausable: Whether or not duration is able to be paused by mouse hover.
  • default: true
• type: The type of the toast, which affects icon and border colour.
  • default: info

If you want to stick to a style and would prefer to not give ToastOptions every time you push a toast, defaults can instead be set on the ToastWrapper.

const toastDefaults: ToastOptions = { ... }; const animationDefaults: AnimationOptions = { fade: {}, // FadeParams flip: {}, // FlipParams fly: {} // FlyParams };

<ToastWrapper position={'bottom' | 'end' | 'start' | 'top'} {animationDefaults} {toastDefaults} />

as above.

• fade: Fade transition parameters. OUT transition.
  • default: { duration: 400 }
• flip: Flip animation parameters.
  • default: { duration: 400 }
• fly: Fly transition parameters. IN transition.
  • default: { duration: 400 }