Create Beautiful And Engaging Toasts With beautyToast Library

Category: Javascript , Notification | February 28, 2023
Author:ferdinalaxewall
Views Total:570 views
Official Page:Go to website
Last Update:February 28, 2023
License:MIT

Preview:

Create Beautiful And Engaging Toasts With beautyToast Library

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(){}
});

You Might Be Interested In:


Leave a Reply