Toastr 1.3.0 Now Available | John Papa

John Papa

Evangelist on the loose

Toastr 1.3.0 Now Available

...

One year ago this month Hans Fjällemark and I released Toastr and are happy to see that developers seem to appreciate its simplicity. It’s now be downloaded on NuGet over 27,000 times. In fact, the recent version was downloaded over 10,000 times the past 2 months! Today we have released version 1.3.0 to github and NuGet.

Toastr is a simple JavaScript toast notification library that is small, easy to use, and extendable. It allows you to create simple toasts with HTML5 and JavaScript like this:

image

Simply include the files in your HTML page and write a simple line of code like this:

var msg = 'Are you the six fingered man?';
var title = 'Inigo Montoya';
toastr.success(msg, title);

Click the this button to try it yourself.



Get Toastr 1.3.0

You can grab the latest bits from NuGet or github

What’s New in 1.3.0

  • Added onFadeIn and onFadeOut callbacks.
toastr.options.onFadeIn = 
    function() { 
        console.log('hello'); 
    };
  • Added option newestOnTop to show toasts in oldest or newest first order.
toastr.options.newestOnTop = false;
  • Fixed margins on full width toasts
  • Added LESS file.
  • Added min file for JS and CSS
  • Added missing vendor prefixes in CSS.
  • Various minor bug fixes.
  • Added unit tests for new features.

Live Demo

Needs more information? Check out the readme on the github page for details on the simple API. You can also find a link to the live toastr demo on github or you can go directly to the toastr demo from here.

Some of these features came right from pull requests from Toastr users. If you have an idea for Toastr, feel free to contribute and make a pull request. just be sure to also include unit tests to cover any code changes.

tags: github nuget open source toastr
  • Samuel

    Hi John, nice work on tostr!
    I was using something like your toastr before… but yours are very cool.

    How can i breeze a toastr until be clicked by user, i see you in a talk show whith Cody, and you said we can breeze a toast…

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1353

  • Sop Killen

    Is it possible to register a callback that is called when a specific toast is clicked?

    • John

      Sop,

      Yes. You can grab the jQuery object that wraps the toastr object after you craete it. var myToast = toastr.info('hi'); And then do what you please.

  • Gregg

    Great library! I’ve used jGrowl in the past but I’ll have to give this one a try. One feature that would be really nice, though, is a way to close the popups before the fadeout.

    • John

      Gregg – You can clear the toast or you can click on it, which will also close it.

  • Tiago Reis

    Hey guys,

    I actually created a new NodeJS Seed Project on Github that uses Toastr. I love this library
    Please check it out. Core technologies are: NodeJS, AngularJS, RequireJS, Express, Passport. https://github.com/jameskings/angularseed

  • http://alpinemetrics.com Tom Wilson

    Great little library!

    I found that if I create a toast notification, clear the notification and then create another notification right away after the clear, the 2nd notification also gets cleared.

    In order to fix this, I had to set the fadeout time to 0.

    Also, is there a way to keep a toast notification persistent until it would be programmatically closed?

    example…
    var offlineNotification = toastr.error(“your connection is currently offline”,”,{persistant:true});
    toastr.clear(); // clears all notifications except the above.
    toastr.clear(offlineNotification ); // we are not back online and can clear this notification.

    Thanks again for this great library and for sharing your SPA knowledge!

    Tom

    • John

      Tom – Try timeOut = 0 and extendedTimeOut = 0 to keep it around til it is closed. See this demo page.

      toastr.options: {
        "debug": false,
        "positionClass": "toast-top-right",
        "onclick": null,
        "fadeIn": 300,
        "fadeOut": 1000,
        "timeOut": 0,
        "extendedTimeOut": 0
      }
      
      toastr[success]("My name is Inigo Montoya. You killed my father. Prepare to die!")
      
%d bloggers like this: