✨ Version 2 is here!

We're excited to announce the latest update to butterup, bringing new features and improvements to enhance your toasting experience!

New Features

• Custom Icons: You can now set custom icons for your toasts using the customIcon option.
• Click Handling: Added onClick callback function for custom click event handling on toasts.
• Lifecycle Callbacks:
  • onRender: Execute code when a toast is rendered.
  • onTimeout: Perform actions when a toast times out.
• Custom HTML: Use the customHTML option to insert custom HTML content into your toasts.
• Interactive Buttons:
  • primaryButton: Add a primary action button to your toast.
  • secondaryButton: Include a secondary action button for more options.

NPM support

You can now install butterup with npm using the command:

npm i butteruptoasts

You will also need to import the JS and CSS into your project with the following code:

// In your JavaScript file
import butterup from 'butteruptoasts';

// In your CSS or JavaScript file
import 'butteruptoasts/dist/styles.css';

Improvements

• Simplified the project by removing the global stackedToasts option to maintain Butterup's core simplicity.

Usage Examples

Custom Icon

butterup.toast({
  title: "Custom Icon",
  message: "This toast has a custom icon!",
  icon: true,
  customIcon: '<svg>... your custom SVG here ...</svg>'
});

Click Handling

butterup.toast({
  title: "Clickable Toast",
  message: "Click me!",
  onClick: function(event) {
    console.log("Toast clicked!");
  }
});

Lifecycle Callbacks

butterup.toast({
  title: "Lifecycle Example",
  message: "Watch the console!",
  onRender: function(toast) {
    console.log("Toast rendered:", toast);
  },
  onTimeout: function(toast) {
    console.log("Toast timed out:", toast);
  }
});

Custom HTML

butterup.toast({
  title: "Custom Content",
  customHTML: '<p>This is <strong>custom HTML</strong> content!</p>'
});

Interactive Buttons

butterup.toast({
  title: "Action Required",
  message: "Please choose an option:",
  primaryButton: {
    text: "Approve",
    onClick: function() { console.log("Approved!"); }
  },
  secondaryButton: {
    text: "Reject",
    onClick: function() { console.log("Rejected!"); }
  }
});

We hope you enjoy these new features and improvements! As always, we appreciate your feedback and contributions to make Butterup.js even better.

Happy toasting! 🍞✨