JavaScript Plugin For Custom Toast Notifications – Simple Notify

Preview:

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 dismisses or not.
• Supports HTML content.
• Custom icon.
• Custom position.
• And much more.

See Also:

• 10 Best Toast Notification JavaScript Libraries

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.5.5 (05/26/2022)

• Fixed SVG not showing on Safari.

v0.5.4 (08/06/2021)

• Minor fixes and package updates

v0.5.2 (06/07/2021)

• Bugfix

v0.5.1 (05/20/2021)

• added raw html support for text parameter

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