toastr v2.0.1 Release Notes

Release Date: 2013-09-11 // over 10 years ago
  • 🆕 New Features

    Close Button

    Optionally enable a close button

    toastr.options.closeButton = true;
    

    Optionally override the close button's HTML.

    toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';
    

    You can also override the CSS/LESS for #toast-container .toast-close-button

    Callbacks

    // Define a callback for when the toast is shown/hidden
    toastr.options.onShown = function() { console.log('hello'); }
    toastr.options.onHidden = function() { console.log('goodbye'); }
    

    Animation Options

    0️⃣ Toastr will supply default animations, so you do not have to provide any of these settings. However you have the option to override the animations if you like.

    Easings

    0️⃣ Optionally override the animation easing to show or hide the toasts. Default is swing. swing and linear are built into jQuery.

    toastr.options.showEasing = 'swing';
    toastr.options.hideEasing = 'linear';
    

    🔌 Using the jQuery Easing plugin (http://www.gsgd.co.uk/sandbox/jquery/easing/)

    toastr.options.showEasing = 'easeOutBounce';
    toastr.options.hideEasing = 'easeInBack';
    

    Animation Method

    0️⃣ Use the jQuery show/hide method of your choice. These default to fadeIn/fadeOut. The methods fadeIn/fadeOut, slideDown/slideUp, and show/hide are built into jQuery.

    toastr.options.showMethod = 'slideDown'; 
    toastr.options.hideMethod = 'slideUp'; 
    

    Timeouts

    Control how toastr interacts with users by setting timeouts appropriately.

    toastr.options.timeout = 30; // How long the toast will display without user interaction
    toastr.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it
    

    💥 Breaking Changes

    Animation Changes

    🗄 The following animations options have been deprecated and should be replaced:

    • Replace options.fadeIn with options.showDuration
    • Replace options.onFadeIn with options.onShown
    • Replace options.fadeOut with options.hideDuration
    • Replace options.onFadeOut with options.onHidden