Create Beautiful And Engaging Toasts With beautyToast Library

Preview:

Description:

beautyToast is a fast, customizable toast notification library that provides a simple way to notify users of important events or updates.

It offers a stylish look that’s perfect for modern web applications. Additionally, you can customize the toast’s appearance with custom icons, backgrounds, and animations to match your app design and branding.

How to use it:

1. Download and load the minified version of the beautyToast in the document.

<link rel="stylesheet" href="beautyToast.css" />
<script src="beautyToast.min.js"></script>

2. Create various types of toast notifications using the following syntax.

beautyToast.success({
  title: 'Success', 
  message: 'Success Toast'
});
beautyToast.error({
  title: 'Error',
  message: 'Error Toast'
});
beautyToast.info({
  title: 'Info',
  message: 'Info Toast' 
});
beautyToast.warning({
  title: 'Warning', 
  message: 'Warning Toast'
});

3. Assign a unique ID to the toast notification.

beautyToast.success({
  title: 'Success', 
  message: 'Success Toast',
  id: "toast1"
});

4. Add a custom icon to the toast notification.

beautyToast.success({
  title: 'Success', 
  message: 'Success Toast',
  icon: 'icon-class-here',
  iconColor: '#fff',
  iconWidth: 24,
  iconHeight: 24,
});

5. Specify the timeout in ms. Default: 2500.

beautyToast.success({
  title: 'Success', 
  message: 'Success Toast',
  timeout: 3000, // auto-dismiss after 3 seconds
});

6. Specify the animation speed. Default: 150.

beautyToast.success({
  title: 'Success', 
  message: 'Success Toast',
  animationTime: 200, // auto-dismiss after 3 seconds
});

7. Customize the colors.

beautyToast.success({
  title: 'Success', 
  message: 'Success Toast',
  backgroundColor: '',
  messageColor: '',
  titleColor: '',
  progressBarColor: '',
  topbarColor: '',
});

8. Enable the dark mode.

beautyToast.success({
  title: 'Success', 
  message: 'Success Toast',
  darkTheme: true,
});

9. Callback functions.

beautyToast.success({
  title: 'Success', 
  message: 'Success Toast',
  onClose : function(){},
  onOpen : function(){}
});