xdtoast

Install

After successfully downloading xdtoast, the next step is to import it into your HTML file

<script type="module">
  import xdtoast from './xdtoast.js';
</script>

Import with CDN :

JSDelivr

<script type="module">
  import xdtoast from 'https://cdn.jsdelivr.net/npm/xdtoast/dist/xdtoast.js'
</script>

UNPKG

<script type="module">
  import xdtoast from 'https://unpkg.com/xdtoast@latest/dist/xdtoast.js'
</script>

NPM

<script type="module">
  import xdtoast from 'node_modules/xdtoast/dist/xdtoast.js'
</script>

Initialization

// Initialize the xdtoast, try using unpkg
  import xdtoast from 'https://unpkg.com/xdtoast@latest/dist/xdtoast.js';
  let toast = new xdtoast({
  width:'fit-content',
  time: 2
  });

// show toast
 toast.push({
  icon:'',
  title:'toast header',
  content:'This is toast content',
  style:'success'
 });

Options

xdtoast({…}) options

position	top-left, top-right, bottom-left, bottom-right
offsetX	Horizontal offset from the edge of the screen
offsetY	Verticaly offset from the edge of the screen
width	Width of the toast
gap	Space between multiple toasts
duration	Duration of the animation when the toast appears
timing	CSS timing function for the animation (e.g., ease, ease-in, ease-out, linear)
time	Time (in seconds) before the toast automatically dismisses
dim	Whether or not to dim the background to old toast (true/false)

Example Code

let toast = new xdtoast({
  position: 'top-right',
  offsetX: 20,
  offsetY: 20,
  width: 200,
  gap: 5,
  duration: 0.25,
  time: 5,
  timing: 'ease-out',
  dim: false
})

push({…}) options

icon	Google Icons. See: https://fonts.google.com/icons
title	Header text of the toast
content	Content of the toast
style	light, dark, success, warning, danger, info
onCreate	an script when the toast is created
onClose	an script when the toast is closed

Example Code

toast.push({
 icon: 'content_copy',
 title: 'copied successfuly',
 content: 'close this toast to continue',
 style:'success',
 onCreate: toast => {
   alert('toast is created');
 },
 onClose: toast => {
   alert('toast is closed');
 }
})