Toaster.js

Github

                    

Toaster({
    type: 'info',

    title: 'Info Toast',
    text: 'This is a button toast',

    position: 'bottom-left',
    duration: 5000,

    showCloseIcon: false,

    showProgressBar: true,
    pauseDurationOnHover: true,

    showButton: true,
    buttonText: 'Ok',
    showButtonIcon: true,

    onButtonClick: (event, toast) => {
        toast.ToasterHide()
    }
})
                        

Toaster({
    title: 'Loading',
    text: 'Please wait...',

    position: 'top-right',

    promiseCallback: () => new Promise((resolve, reject) =>
        setTimeout(() => {
            const randomBoolean = Math.random() < 0.5;

            if (randomBoolean) {
                resolve('The promise was resolved')
            } else {
                reject('The promise was rejected')
            }
        }, 1000)
    )

    promiseThenToast: {
        title: 'Success',

        position: 'top-right',
        duration: 5000,

        pauseDurationOnHover: true,

        showCloseIcon: true,
        showProgressBar: true,
    },
    promiseThenCallback: result => {
        return {
            text: result
        }
    },

    promiseCatchToast: {
        title: 'Error',

        position: 'top-right',
        duration: 5000,

        pauseDurationOnHover: true,

        showCloseIcon: true,
        showProgressBar: true,

        showButton: true,
        buttonText: 'Retry',
        showButtonIcon: true,

        onButtonClick: (event, toast) => {
            toast.ToasterHide()
            document.querySelector('#btn-show-promise-toast').click()
        }
    },
    promiseCatchCallback: error => {
        return {
            text: error
        }
    }
})