JavaScript Plugin For Custom Toast Notifications – Simple Notify

Category: Javascript , Notification | March 24, 2021
Author: dgknca
Views Total: 255 views
Official Page: Go to website
Last Update: March 24, 2021
License: MIT

Preview:

JavaScript Plugin For Custom Toast Notifications – Simple Notify

Description:

A simple notification JavaScript plugin for displaying highly customizable, toast-style alert popups on the page.

Features:

  • 4 built-in notification types.
  • 2 animations: slide or fade.
  • Auto dismiss or not.
  • Custom icon.
  • Custom position.
  • And much more.

See Also:

How to use it:

1. Load the minified version of the Simple Notify JavaScript library on the HTML page.

<link rel="stylesheet" href="dist/simple-notify.min.css" />
<script src="dist/simple-notify.min.js"></script>

2. Create a basic alert notification.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
})

3. Create a toast notification that automatically dismisses after 3 seconds.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    autoclose: true,
    autotimeout: 3000
})

4. Determine the notification type: ‘success’, ‘error’, or ‘warning’.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    status: 'success'
})

5. Determine the animation you’d like to use. Default: ‘fade’.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    effect: 'slide',
    speed: 300 // animation speed
})

6. Determine whether to show icons & close button. Default: true.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    showCloseButton: false,
    showIcon: false,
})

7. Specify the space between notifications.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    gap: 20,
    distance: 20 // space between popup & screen edge
})

8. Specify the position of the notifications.

  • top
  • right
  • bottom
  • left
  • x-center
  • y-center
  • center
new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    position: 'right top'
})

9. Set the theme you’d like to use:

  • 1: Default:
  • 2: Filled Background + Dark Text
  • 3: Filled Background + Light Text
new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    type: 2
})

10. Add a custom icon to the notification.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    customIcon: 'any html here'
})

11. Add a custom CSS class to the notification.

new Notify ({
    title: 'Notify Title',
    text: 'Notify Message',
    customClass: 'any class here'
})

12. Close the notification manually.

instance.close();

Changelog:

v0.4.0 (03/24/2021)

  • add 3 new positions

v0.3.1 (03/15/2021)

  • custom typescript types added

v0.3.0 (03/07/2021)

  • isIcon replaced with showIcon
  • isCloseButton replaced with showCloseButton

You Might Be Interested In:


Leave a Reply