Toast

# Features

• Supports closing automatically after a specified time.
• Pauses closing on hover, focus and window blur.
• Can remove or update toast programmatically.
• Manage promises within toast.
• Support for progress bars.

# Anatomy

Typically, a toast consists of:

• Group: The container for all the toasts.
• Root: The root container for the toast.

<script>
	import { createToast } from '@grail-ui/svelte';

	const { toasts, toaster, useToast, rootAttrs, groupAttrs, progress } = createToast();
</script>

<div {...$groupAttrs}>
	{#each $toasts as toast (toast.id)}
		<div use:useToast={toast} {...$rootAttrs(toast)}>
			<h3>{toast.title}</h3>
			<div>{toast.description}</div>
		</div>
	{/each}
</div>

<button
	on:click={() => {
		toaster.create({ title: 'Hello world', description: 'This is a toast' });
	}}>Create</button
>

# Examples

# Creating a toast

To create a toast, use the toaster.create method.

toaster.create({
  title: "Hello World",
  description: "This is a toast",
  type: "info",
})

# Setting custom duration

Every toast has a default visible duration depending on the type set.

You can override the duration of the toast by passing the duration property to the toaster.create function.

toaster.create({
  title: "Hello World",
  duration: 6000,
})

# Programmatic control

To update a toast programmatically, you need access to the unique identifier of the toast.

This identifier can be either:

• the id passed into toaster.create
• the returned random id when the toaster.create is called.

You can use any of the following methods to control a toast:

• toaster.upsert — Creates or updates a toast.
• toaster.update — Updates a toast.
• toaster.dismiss — Dismisses a toast.
• toaster.pause — Pauses a toast.
• toaster.resume — Resumes a toast.

# Handling promises

Use toaster.promise method to update the toast when it resolves or rejects.

toaster.promise(promise, {
  loading: {
    title: "Loading",
    description: "Please wait...",
  },
  success: (data) => ({
    title: "Success",
    description: "Operation completed",
  }),
  error: (err) => ({
    title: "Error",
    description: "Operation failed",
  }),
})

# Limiting the number of toasts

To limit the number of visible toasts, pass the max property to the factory function.

createToast({
      max: 5,
})

# Using progressbars

Use the progress store to animate the toast's progress.

<div use:useToast={toast} {...$rootAttrs(toast)}>
  <h3>{toast.title}</h3>
  <div>{toast.description}</div>
  <progress value={$progress(toast)} max={toast.duration} />
</div>

# Pausing toasts

There are three ways to pause a toast's progress:

• Use pauseOnPageIdle to pause when document loses focus or the page is idle.
• Use pauseOnInteraction to pause when the toast is hovered or focused.
• Use toaster.pause(id) to pause a toast programmatically.

createToast({
	
pauseOnPageIdle: true,
	
pauseOnInteraction: true,
})

# API

# ToastConfig

# ToastReturn

# ToastParams