Skip to content

Webstudio module for displaying onscreen notifications and alerts based on events and actions

Notifications You must be signed in to change notification settings

webstudioso/wsm-toast

Repository files navigation

Webstudio Toast Module

This module adds alerts and notification capabilities to web apps built with Webstudio

Webstudio Module Toast

Testing and Building Module

npm i
npm run test
npm run build

Publish to NPMJS

npm publish

Importing Dependency in Webstudio

Add it to the project, this is compatible with grapesjs as well.

npm i --save wsm-toast@latest

To import in the editor add the file and include it as a Plugin

import PluginToast from "wsm-toast"

const editor = grapesjs.init({
    container: "#gjs",
    plugins: [
        PluginToast
    ],
})

Dispatch Toast Event From Other Modules In Webstudio

const event = new CustomEvent('onToast', { 
    detail: { 
        alertSeverity: "info", // info, success or error
        message: 'Message to display in toast', 
        link: 'https://google.com', // Optional link
        timeout: 5000 // Milliseconds of visibility
    }
})
 document.dispatchEvent(event)

About

Webstudio module for displaying onscreen notifications and alerts based on events and actions

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published