Growl-style Sliding Notification Library – PNT.js

Preview:

Description:

A JavaScript library that brings Growl-style desktop notifications to the web.

PNT.js is a small and fast JavaScript library that helps you create grow-style sliding notifications on the web page. It auto dismisses after a timeout or can be dismissed as a normal notification.

It includes no external dependencies aside from HTML5 and JavaScript, and is easy to customize.

How to use it:

1. Import the PNT.js into your document.

<link rel="stylesheet" href="./pnt/pnt-styles.css" />
<script src="./pnt/pnt-core.js"></script>

2. Create notifications with various preset styles.

// Info
pnt.presets.info("Info message goes here");
// Success
pnt.presets.success("Success message goes here");
// Warning
pnt.presets.warn("Warning message goes here");
// Error
pnt.presets.error("Error message goes here");

3. Or create a customizable notification using the pnt.compose() method.

// pnt.compose("message", "title", "bgColor", "fontColor", isRemoveable, timeout)
pnt.compose("Your message goes here", "Your title goes here", "#ffffff", "#000000", false, 5000);

4. Override the default configs directly in the JS.

config: {
  // Specifies if pnt pulls it's default font "Rubik" from google fonts.
  // If this option is disabled and the user doesn't have the font installed, pnt will use a fallback font
  pullFromGooglefonts: true,
  // Specifies the max width of the container and the contents inside it. Use it to control how "long" your messages will be
  containerMaxWidth: 400, // (px)
  // The amount of time an animation will take to complete
  animationDuration: 400, // (ms)
  // Set the interpolation for the adding and removing of messages
  animationInterpolation: "cubic-bezier(0.075, 0.82, 0.165, 1)",
  // Turn debug mode on / off. Debug mode will post logs of the current events to the console
  debug: false,
},

5. Clear all notifications.

pnt.presets.clearAll();