Back to guidelines

Web ComponentThe latest version of this package is: 0.3.4, Opens in new window

Webcomponent for Toast Component

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-wc/toast@0.3.4

Table of Contents

Usage

The <ids-toast>-webcomponent operates as a factory for toasts to be displayed. Use events to trigger toasts.

With the given markup:

<ids-toast></ids-toast>
<script src="…toast-webcomponent.iife.js"></script>

And the event:

const _dispatchToastEvent = ({ ...args }) => {
  const _event = new CustomEvent('ids:toast', {
    bubbles: !0,
    detail: {
      payload: { ...args },
    },
  });
  document.dispatchEvent(_event);
};

_dispatchToastEvent({
  target: e.target,
  toggle: () => {
    console.info('toggle');
  },
  message: 'Short message',
  type: 'info|success|warning|error',
  icon: true || false,
  action: () => {
    console.info('action');
  },
  actionText: 'Undo',
  close: () => {
    console.info('close');
  },
});

Options: Object

Name Type Default Mandatory?
target Element Element the toast is initiated from No
toggle Function A callback to be used when the toast is toggled No
message String The mssage to display Yes
type String Type of toast No
icon Boolean Use icon? No
action Function A callback to be used when the action is used No
actionText String Text of the action button Only if a callback for action is given
close Function A callback to be used when the toast is closing No

Api

IDSToast

Kind:

global class

new IDSToast()

This Webcomponent is to be included on the page where you want to have toasts. An CustomEvent is fired, and an appropriate toast is displayed.

Example

// Example usage with the CustomEvent
     const _dispatchToastEvent = ({ ...args }) => {
       const _event = new CustomEvent('ids:toast', {
         bubbles: !0,
         detail: {
           payload: { ...args }
         }
       });
       document.dispatchEvent(_event);
     };

     _dispatchToastEvent({
       target: e.target,
       toggle: () => {
         console.info('toggle');
       },
       message: 'Short message',
       type: 'info|success|warning|error',
       icon: true || false,
       action: () => {
         console.info('action');
       },
       actionText: 'Undo',
       close: () => {
         console.info('close');
       }
     });
Contact us, Opens in new window