@justeattakeaway/pie-toast v0.9.5

@justeattakeaway/pie-toast

Source Code | Design Documentation | NPM

@justeattakeaway/pie-toast is a Web Component built using the Lit library. It offers a simple and accessible toast component for web applications.

Table of Contents

• Installation
• Documentation
  • Properties
  • Slots
  • CSS Variables
  • Events
• Usage Examples
• Questions and Support
• Contributing

Installation

To install any of our web components in your application, we would suggest following the getting started guide to set up your project.

Ideally, you should install the component using the @justeattakeaway/pie-webc package, which includes all of the components. Or you can install the individual component package.

Documentation

Properties

Slots

This component does not have any slots. All content is controlled through properties.

CSS Variables

This component does not expose any CSS variables for style overrides.

Events

Usage Examples

⚠️ By default, the toast will auto-dismiss in five seconds. To disable the auto-dismiss functionality, you must set the duration property to null.

For HTML:

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

<!-- pass js file into <script> tag -->
<pie-toast message="Message"></pie-toast>
<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.js';

<pie-toast message="Message"></pie-toast>
// or with duration set to null to disable auto-dismiss
<pie-toast message="Message" duration={null}></pie-toast>

For React Applications:

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

<PieToast message="Message"></PieToast>
// or with duration set to null to disable auto-dismiss
<PieToast message="Message" duration={null}></PieToast>

Questions and Support

If you work at Just Eat Takeaway.com, please contact us on #help-designsystem. Otherwise, please raise an issue on Github.

Contributing

Check out our contributing guide for more information on local development and how to run specific component tests.