Skip to content

Toastr JavaScript Notification Library

Toastr is a JavaScript library designed to create non-blocking notification messages, often referred to as "toasts".^[600-developer__frontend__js-plugin__js-plugin.md]

Usage

The library provides simple methods to generate different types of notifications, such as success, warning, and error messages^[600-developer__frontend__js-plugin__js-plugin.md].

Configuration

Toastr allows for extensive customization of the toast behavior and appearance through an options object^[600-developer__frontend__js-plugin__js-plugin.md].

  • Interaction: The closeButton option determines if a close button is visible, while onclick allows for a function to be executed when the notification is clicked^[600-developer__frontend__js-plugin__js-plugin.md].
  • Layout: Positioning is handled by the positionClass property (e.g., toast-bottom-left), and newestOnTop controls the vertical stacking order of multiple toasts^[600-developer__frontend__js-plugin__js-plugin.md].
  • Timing: Behavior related to visibility is controlled by several duration settings. timeOut sets how long the toast remains visible, and extendedTimeOut defines the delay before hiding when the user hovers over it. showDuration and hideDuration configure the animation speeds in milliseconds^[600-developer__frontend__js-plugin__js-plugin.md].
  • Visuals: A progress bar indicating the time remaining can be toggled using progressBar^[600-developer__frontend__js-plugin__js-plugin.md].

Animation

Visual transitions are configurable using specific easing and method properties^[600-developer__frontend__js-plugin__js-plugin.md].

  • showEasing and hideEasing define the animation timing curves (e.g., "swing", "linear")^[600-developer__frontend__js-plugin__js-plugin.md].
  • showMethod and hideMethod define the specific CSS animation effects, such as fadeIn and fadeOut^[600-developer__frontend__js-plugin__js-plugin.md].

Sources

^[600-developer__frontend__js-plugin__js-plugin.md]

  • [[JavaScript]]
  • [[Front-end development]]