Lightweight Notification Popup JavaScript Library – X-Notify

Preview:

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"
});

Changelog:

06/18/2021

• Fixed Annoying scrollbar

05/22/2021

• Changed container position from absolute to fixed.