Close Menu

notie

Description

Notie is a simple and lightweight JavaScript library for displaying notifications and alerts on web applications. With a user-friendly interface and customizable options, Notie helps developers enhance user experience by providing timely and visually appealing notifications.

Features

  • Easy to use and implement
  • Lightweight and fast-loading
  • Customizable appearance and animation effects
  • Provides different types of notifications, including success, warning, error, and information
  • Supports optional buttons for user interaction
  • Compatible with major web browsers

Installation

To start using Notie in your project, follow these simple steps:

  • Download the Notie library from the official GitHub repository or use a package manager like npm.
  • Include the Notie JavaScript file in your HTML file:




Usage

Notie provides various methods for displaying different types of notifications. Below are some common examples:

Display a Success Notification



notie.success({
text: 'Success!',
position: 'top'
});

Display a Warning Notification with a Button



notie.warning({
text: 'Warning!',
position: 'center',
buttonText: 'Dismiss',
callback: function() {
// Handle button click event
console.log('Button clicked');
}
});

Configuration Options

Notie provides several configuration options that can be customized according to your needs. Below are some commonly used options:

  • text: The text content of the notification
  • position: The position of the notification (top, middle, or bottom)
  • type: The type of notification (success, warning, error, or info)
  • time: The duration of the notification in milliseconds
  • backgroundColor: The background color of the notification
  • buttonText: The text for an optional button
  • callback: A callback function to handle button click events

Examples

Here are some examples of using Notie in different scenarios:

Displaying an Error Notification



notie.error({
text: 'An error occurred!',
position: 'bottom',
time: 3000
});

Displaying an Information Notification with Custom Background Color



notie.info({
text: 'Hello there!',
position: 'middle',
backgroundColor: '#336699'
});

Browser Compatibility

Notie is compatible with the following web browsers:

  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
  • Microsoft Edge
  • Internet Explorer 11+

For the best user experience, it is recommended to use the latest version of these browsers.

Conclusion

Notie is a versatile and user-friendly JavaScript library for displaying notifications and alerts in web applications. With its easy implementation and customization options, developers can enhance the user experience by providing timely and visually appealing notifications. Start using Notie in your projects to improve user engagement and interaction.