Versatile And Beautiful Toast Notification Library – RetroNotify

Category: Javascript , Notification | March 2, 2023
Author:91ahmed
Views Total:430 views
Official Page:Go to website
Last Update:March 2, 2023
License:MIT

Preview:

Versatile And Beautiful Toast Notification Library – RetroNotify

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,
     
})

You Might Be Interested In:


Leave a Reply