Toast

A toast notification is a brief, non-intrusive message that appears on the screen to provide users with information or alerts.

Overview

pie-toast-provider is a Web Component built using Lit. It offers a simple and accessible toast provider component for web applications.

This component can be easily integrated into various frontend frameworks and customised through a set of properties.

The pie-toast-provider component provides centralized management for toast notifications in an application. It ensures that toasts are displayed in priority order based on their variant and actionable state, using a queueing system. The component handles the lifecycle of each toast, including dismissing the current toast and showing the next one.

Installation

To install pie-toast-provider in your application, run the following on your command line:

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Props

Prop	Options	Description	Default
options	`{}`	Default options for all toasts; accepts all toast props.	`{}`

Events

Event	Type	Description
`pie-toast-provider-queue-update`	`CustomEvent`	Triggered when a toast is added or removed from the queue.

Examples

The usage guideline is:

Place pie-toast-provider at the root level of your application or page.
Use the toaster utility from any where in your app to dynamically create toasts.

Importing the component

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/toast-provider.js'

<!-- pass js file into <script> tag -->
<pie-toast-provider></pie-toast-provider>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/toast-provider.js';

<pie-toast-provider></pie-toast-provider>

For React Applications:

import { PieToastProvider } from '@justeattakeaway/pie-webc/react/toast-provider.js';

<PieToastProvider></PieToastProvider>

Creating Toasts with `toaster`

The toaster utility dynamically creates toasts. It can be imported and called from any file or component in your application.

import { toaster } from '@justeattakeaway/pie-webc/components/toast-provider.js';

toaster.createToast({
  message: 'This is a success toast!',
  variant: 'success',
  isDismissible: true,
});

To clear all active and queued toasts:

toaster.clearToasts();