xmd-toast

This library shows a small toast at the bottom of the screen, with a fixed text and action buttons and includes programmed and nested toasts.

Usage no npm install needed!

<script type="module">
  import xmdToast from 'https://cdn.skypack.dev/xmd-toast';
</script>

README

XMATERIAL-DESIGN TOAST 🍞

This library shows a small toast at the bottom of the screen, with a fixed text and action buttons and includes programmed and nested toasts.

Install ⚙️

npm i xmd-toast

Using 💻

import toast from "xmd-toast";

// HERE IS THE MAGIC!
toast({ text:"Helo World" })

// BETTER TOAST
toast({
  text:"Alert text",
  actionText: "Ok",
  fixed:false,
  time:5000,
  action:() => console.log("Message from action"),
  onHide:() => console.log("Hide toast"),
})

// TRY SHOW TOAST AFTER TOAST
toast({
  text:"Show toast",
  actionText: "Throw",
  action:() => {
    toast({text: "New toast"})
  }
})

TypeScript Compatible 😀

Options:

Property Type Default Description
Text String "Alert" The main text of the toast
actionText String "Confirm" The text of the action button
onHide Function undefined Call when the toast left the screen
action Function undefined Call on action button click event
fixed Boolean false True: Toast never hide / False: Toast Hide
time Number 5000 The lifetime of toast

Preview 👀

CodeSandbox