toast

Made quickly without having worked on it, sorry

Module for Javascript toast messages

Import via cdn

<script src='https://unpkg.com/codethereal-toastr@1.1.1/dist/toast.js'></script>

Import via npm

npm i codethereal-toastr

Use

<style>
  #toast-container .close {
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: pointer;
    opacity: 0.8;
    color: #fff;
    font-size: 1.25rem;
  }
  #toast-container .close:hover {
    color: #000;
  }
</style>

<div id="toast-container"></div>

<script src="../dist/toast.js"></script>
<script>
    // toast-container id is a must
    const toastr = new Toast(document.querySelector('#toast-container'), {
      layout: `<div>
                  <h3>{{title}}</h3>
                  <p>{{message}}</p>
               </div>
               <span class="close" onclick="clearToast({{id}})">&times;</span>`,
    })
    toastr.run({
        status: 1,
        title: 'hello',
        message: 'hello world'
    })
</script>

All options

<script>
  toastr.run({
    status: 1, // {1: 'success', 2: 'info', 3: 'warning', 0: 'error'},
    title: '',
    message: '',
    transition: 'zoom', // ['zoom', 'fade', 'slide'],
    timeout: 3500,
    progress: true,
    addition: 'any string that will shown under message'
  })
</script>