John Papa

Simple JavaScript Notifications with toastr

John Papa -

My friend Hans Fjällemark and I have been collaborating on some JavaScript libraries lately and we decided it was time to release toastr, the first of them, on github. Our collaborative organization is under https://github.com/CodeSeven 

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:

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

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

Hans is a great developer / designer and has recently helped me created some nice responsive designs in some demos and Pluralsight courses. You can see the layout he helped design and create in my latest course, JsRender Fundamentals on Pluralsight now.

The API

There are 4 methods to learn. info, warning, success and error. The each have a message and an optional title.

// Display a info toast, with no title
toastr.info('Are you the six fingered man?')

// Display a warning toast, with no title

toastr.warning('My name is Inigo Montoya. You Killed my father, prepare to die!')


// Display a success toast, with a title

toastr.success('Have fun storming the castle!', 'Miracle Max Says')


// Display an error toast, with a title

toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

After having it in alpha for a few weeks and accepting feedback on it, we decided today to take it to beta as the API has stabilized. 

toastr is Responsive

Just include the viewport meta tag and the toastr-responsive.css, and toastr will adjust to different device sizes. See toastr and its responsive web design here on responsinator.com 

Some important links:

  1. see toastr in action at toastr’s demo page here
  2. grab toastr from github at https://github.com/CodeSeven/toastr

What Else Can toastr Do?

Check out the demo for these and other examples of toastr in action.

  1. Override the css classes to change the appearance
  2. Set the fadeOut, fadeIn, and timeOut settings
  3. Set timeOut to 0 to make the toast sticky
  4. Position the toast in the top left, top right, bottom right, or bottom left
  5. Set the message to HTML content  and/or wire event handlers up to that content.
  6. For debugging, set the debug info to true to show all of the options and setting in the browser’s console window

Unit Tests

Feel free to check out toastr’s unit tests, which you can run online here. We decided to go simple and use QUnit, which does the job quite nicely.

NuGet

I published a package on NuGet for toastr that you can find here. Be sure to allow searching for pre-release packages (NuGet disables that by default). We do not foresee any changes to the API so this beta should be pretty solid. If we receive no major issues, we’ll go RC very soon.