svelte-toasts

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

View the demo.

Usage

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>

Functions

/**
 * 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 => { ... }

Options

Toast Options

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

ToastOptions

• 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

Default Options

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

ToastOptions

as above.

AnimationOptions

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