Astral.CSS Toastify

Getting Started with Astral.CSS Toastify

Step 1: Include Required Files

To start using Toastify, include the Astral CSS and JavaScript files in your HTML file:

<link href="https://cdn.jsdelivr.net/gh/thaboyaluya/astral.css-V3.0@master/css/astral.css-v3.0.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/gh/thaboyaluya/astral.css-V3.0@master/js/astral-v3.0.min.js"></script>

Step 2: Display a Toast Notification

Toastify provides a simple API for displaying various types of notifications. Use any of the following methods to create your first toast:

Toastify.default('Wow, so easy!');
Toastify.success('Operation successful!');
Toastify.error('Oops, something went wrong!');
Toastify.warning('Heads up, check this out!');
Toastify.info('Update Available');
Toastify.random(); // Generates a random toast message  

When executed, these commands will display toast messages on your web page.

Customizing Toast Notifications

Toastify includes several configuration options to fine-tune the behavior and appearance of your toast messages. Below are the default settings:

const options = {
  duration: 5000, // Time (in ms) before the toast hides, default is 5000ms
  callback: function() {
      console.log('✅ I am a callback function. Write your own function to override this!');
  }, // Executes when the toast is clicked (optional)
  onHide: function() {
      console.log('✅ Do something after the toast disappears...');
  }, // Executes when the toast disappears (optional)
  position: 'toasts-top-right' // Positions: 'toasts-top-left', 'toasts-bottom-right', 'toasts-bottom-left'
};

Customization Example

You can override the default options by passing your own parameters to the methods:

Toastify.success('File uploaded successfully!', {
    duration: 3000,
    position: 'toasts-bottom-left',
    callback: function() {
        console.log('✅ You clicked on the toast!');
    },
    onHide: function() {
        console.log('✅ Toast disappeared.');
    }
});

Available Methods in Toastify

Here’s the list of public methods to create different types of notifications:

• Toastify.default(message, userOptions): Displays a neutral notification.
• Toastify.success(message, userOptions): Displays a success notification (e.g., green toast).
• Toastify.error(message, userOptions): Displays an error notification (e.g., red toast).
• Toastify.warning(message, userOptions): Displays a warning notification (e.g., yellow toast).
• Toastify.random(): Displays a random toast message.

Toastify.default(message,userOptions)
Toastify.success(message,userOptions)
Toastify.error(message,userOptions)
Toastify.warning(message,userOptions)
Toastify.random()