Lightweight Notification Popup JavaScript Library – X-Notify

Category: Javascript , Notification | February 20, 2021
Author: Xtrendence
Views Total: 164 views
Official Page: Go to website
Last Update: February 20, 2021
License: MIT

Preview:

Lightweight Notification Popup JavaScript Library – X-Notify

Description:

X-Notify is a lightweight JavaScript library for helping developers create notification popups similar to Apple’s Growl and Android’s Toasts.

How to use it:

1. Load the minified version of the X-Notify library and we’re ready to go.

<script src="x-notify.min.js"></script>

2. Initialize the X-Notify library.

const Notify = new XNotify();

2. Create different types of notification popup using the following methods:

Notify.success({ 
  title: "Success Title", 
  description: "Success Message"
});
Notify.error({ 
  title: "Error Title", 
  description: "Error Message"
});
Notify.alert({ 
  title: "Alert Title", 
  description: "Alert Message"
});
Notify.info({ 
  title: "Info Title", 
  description: "Info Message"
});

3. Or create a custom notification popup using the following options:

Notify.info({ 
  title: "Custom Title", 
  description: "Custom Message",
  width: "250px",
  borderRadius: "10px",
  color: "rgb(255,255,255)",
  background: "rgb(0,0,0)"
});

4. Determine the duration of the notification popup. In this example, the notification popup will automatically dismiss after 3 seconds.

Notify.error({ 
  title: "Error Title", 
  description: "Error Message",
  duration: 3000 // default: 5000
});

5. Determine the position of the notification popups.

  • BottomRight
  • BottomLeft
  • TopLeft
  • TopRight (Default)
Notify.error({ 
  title: "Error Title", 
  description: "Error Message",
  position: "BottomRight"
});

You Might Be Interested In:


Leave a Reply