ToastrJS is a JavaScript library for Gnome / Growl type non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.
npm install toastr-comicar
Install-Package toastr
`
#### Bower
`
bower install toastr
`
#### npm
`
npm install --save toastr
`
#### yarn
`
yarn add toastr
`
#### Ruby on Rails
`ruby
Gemfile
gem 'toastr-rails'
`
`coffee
application.coffee
#= require toastr
`
`scss
// application.scss
@import "toastr";
`
Wiki and Change Log
Wiki including Change Log
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
Quick Start
$3
For other API calls, see the demo.
1. Link to toastr.css
2. Link to toastr.js
3. use toastr to display a toast for info, success, warning or error
`js
// Display an info toast with no title
toastr.info('Are you the 6 fingered man?')
`
$3
`js
// 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!')
// Immediately remove current toasts without using animation
toastr.remove()
// Remove current toasts using animation
toastr.clear()
// Override global options
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})
`
$3
In case you want to escape HTML characters in title and message
toastr.options.escapeHtml = true;
$3
Optionally enable a close button
`js
toastr.options.closeButton = true;
``
Optionally override the close button's HTML.
`js
toastr.options.closeHtml = '';
`
You can also override the CSS/LESS for #toast-container .toast-close-button
Optionally override the hide animation when the close button is clicked (falls back to hide configuration).
`js
toastr.options.closeMethod = 'fadeOut';
toastr.options.closeDuration = 300;
toastr.options.closeEasing = 'swing';
`
$3
Show newest toast at bottom (top is default)
`js
toastr.options.newestOnTop = false;
`
$3
`js
// Define a callback for when the toast is shown/hidden/clicked
toastr.options.onShown = function() { console.log('hello'); }
toastr.options.onHidden = function() { console.log('goodbye'); }
toastr.options.onclick = function() { console.log('clicked'); }
toastr.options.onCloseClick = function() { console.log('close button clicked'); }
`
$3
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
Optionally override the animation easing to show or hide the toasts. Default is swing. swing and linear are built into jQuery.
`js
toastr.options.showEasing = 'swing';
toastr.options.hideEasing = 'linear';
toastr.options.closeEasing = 'linear';
`
Using the jQuery Easing plugin (http://www.gsgd.co.uk/sandbox/jquery/easing/)
`js
toastr.options.showEasing = 'easeOutBounce';
toastr.options.hideEasing = 'easeInBack';
toastr.options.closeEasing = 'easeInBack';
`
#### Animation Method
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.
`js
toastr.options.showMethod = 'slideDown';
toastr.options.hideMethod = 'slideUp';
toastr.options.closeMethod = 'slideUp';
`
$3
Rather than having identical toasts stack, set the preventDuplicates property to true. Duplicates are matched to the previous toast based on their message content.
`js
toastr.options.preventDuplicates = true;
`
$3
Control how toastr interacts with users by setting timeouts appropriately.
`js
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
`
$3
To prevent toastr from closing based on the timeouts, set the timeOut and extendedTimeOut options to 0. The toastr will persist until selected.
`js
toastr.options.timeOut = 0;
toastr.options.extendedTimeOut = 0;
`
$3
Visually indicate how long before a toast expires.
`js
toastr.options.progressBar = true;
`
$3
Flip the toastr to be displayed properly for right-to-left languages.
`js
toastr.options.rtl = true;
`
Building Toastr
To build the minified and css versions of Toastr you will need node installed. (Use Homebrew or Chocolatey.)
`
npm install -g gulp karma-cli
npm install
`
At this point the dependencies have been installed and you can build Toastr
- Run the analytics gulp analyze
- Run the test gulp test
- Run the build gulp
Contributing
For a pull request to be considered it must resolve a bug, or add a feature which is beneficial to a large audience.
Pull requests must pass existing unit tests, CI processes, and add additional tests to indicate successful operation of a new feature, or the resolution of an identified bug.
Requests must be made against the develop branch. Pull requests submitted against the master` branch will not be considered.