Lightweight And Simple Custom Alerts (toast) In Pure JavaScript

Sheep Toasts is a lightweight and simple custom alert (toast) in pure JavaScript. You have to use Animate.css, to use the animation of toast.

toast library android, toastify js example, toast library javaScript, toastr js download, vanilla js toast jsfiddle, toastr js demo, toast js npm

Powerful, Bootable, and Playable Generator for Bootstrap Toasts

How to make use of it:

1. Include Animate.css in the header section if you want more animations.

<link rel="stylesheet" href="animate.min.css">

2. Include the basic JavaScript file on the web page.

<script src="sheeptoasts.js"></script>

3. Configure the library with the default options and SheepToasts is ready to use.

SheepToasts.success('Success.');

// mode: success, info, warning
// animation: Name of animation for show toast
// buttons: Buttons [object]
SheepToasts.show(mode, message, animation, buttons)

4. Create a toast using the Yes/No buttons:

SheepToasts.warning('Are you sure?', null, {
  yes: {
    value: 'Yes',
    callback: function(){
      alert('You are sure!');
      SheepToasts.close(this.toastId);
    }
  },
  no: {
    value: 'No',
    callback: function(){
      SheepToasts.close(this.toastId);
    }
  }
});

5. The available choices:

{
  /*
    animation: {
      in: 'fadeIn', //Default: none
      out: 'fadeOut', //Default: none
      duration: '1s' //Default: 0.5s
    }
  */
  animation: false,
  // margin in pixels
  toastMargin: 4,
  // auto dismiss after 5 seconds
  delayRemove: 5000,
  // where to place the toast messages
  sort: 'bottom'
  // main CSS styles
  cssMain: {
    display: 'inline-block',
    maxWidth: '320px',
    padding: '5px 8px',
    position: 'fixed',
    top: 'auto',
    right: '32px',
    bottom: '32px',
    left: 'auto',
    borderRadius: '3px',
    wordBreak: 'break-all',
    fontFamily: 'cursive, sans-serif',
    fontSize: '13px',
    cursor: 'pointer',
    transition: 'top 0.32s, bottom 0.32s',
    webKitAnimationDuration: '0.5s',
    mozAnimationDuration: '0.5s',
    oAnimationDuration: '0.5s',
    animationDuration: '0.5s'
  },
  // button styles
  cssButtons: {
    display: 'inline-block',
    height: '20px',
    margin: '-3px 0 0 3px',
    padding: '0 5px',
    verticalAlign: 'middle',
    whiteSpace: 'nowrap',
    border: 'none',
    borderRadius: '10px',
    fontFamily: 'inherit',
    fontSize: '11px',
    cursor: 'pointer'
  },
  // mode styles
  cssModes: {
    warning: {
      color: '#fafeff',
      background: '#c8354e',
      textShadow: '#e74c3c 1px 2px 1px',
      _buttons: {
        color: '#fafeff',
        textShadow: '#46231f 0px 0px 3px',
        background: '#e25353'
      }
    },
    info: {
      color: '#fafeff',
      background: '#2980b9',
      textShadow: '#3498db 1px 2px 1px',
      _buttons: {
        color: '#fafeff',
        textShadow: '#173646 0px 0px 3px',
        background: '#2c9fea'
      }
    },
    success: {
      color: '#fafeff',
      background: '#27ae60',
      textShadow: '#1e7744 1px 2px 1px',
      _buttons: {
        color: '#fafeff',
        textShadow: '#185833 0px 0px 3px',
        background: '#5ac17f'
      }
    }
  }
}

Simple Fast Vanilla JS Toast Library, SheepToasts Plugin/Github