Versatile And Beautiful Toast Notification Library – RetroNotify

Preview:

Description:

RetroNotify is a versatile JavaScript notification library that displays good-looking toast messages with various notification types and cool fading/sliding animations.

The notification library is extremely lightweight and incredibly easy to use. With a simple and intuitive API that allows you to add toast notifications to your website or web application with just a few lines of code.

How to use it:

1. To get started, include the RetroNotify’s JavaScript and Stylesheet on the page.

<link rel="stylesheet" href="./css/retronotify.css">
<script src="./js/retronotify.js"></script>

2. Create a basic toast message on the screen.

new RetroNotify({
    contentText: 'Toast message here',
})

3. Add a title to the toast message.

new RetroNotify({
    contentText: 'Toast message here',
    contentHeader: 'Toast title here',
})

4. Change the style of the toast message:

• blue
• red
• black
• green
• yellow
• sky
• gray

new RetroNotify({
    contentText: 'Toast message here',
    style: 'sky',
})

5. Change the animation type:

• slideBottomLeft
• slideBottomRight
• slideTopLeft
• slideTopRight
• slideLeftTop
• slideLeftBottom
• slideRightTop
• slideRightBottom
• fadeBottomLeft
• fadeBottomRight
• fadeTopLeft
• fadeTopRight

new RetroNotify({
    contentText: 'Toast message here',
    animate: 'slideTopRight',
})

6. More options.

new RetroNotify({
    // additional CSS class
    class: null,
    // unique ID
    id: null, // add your own id to the container element (default null)
    
    // close button
    contentClose: '×',
    // background color
    background: '#fff',
    // text color
    color: '#012d2d',
    // open/close delay duration in ms
    openDelay: 1000,
    closeDelay: 6000,
     
    // css transition duration
    transition: '0.5s',  (default 0.5s)
    
    // set to true to make it static without animation (default false)
    fixed: false,
     
})