Skip to content

toastr.js

toastr.js is a JavaScript plugin used for creating non-blocking notification messages (often called "toasts").^[600-developer-frontend-js-plugin-js-plugin.md]

It is typically used to display alerts or feedback to the user—such as success, warning, or error messages—without interrupting the user's workflow with modal dialogs.^[600-developer-frontend-js-plugin-js-plugin.md]

Features

The plugin allows for extensive customization of the notification behavior and appearance through a global options object.^[600-developer-frontend-js-plugin-js-plugin.md] Key configurable features include:

  • Positioning: Notifications can be positioned using the positionClass parameter (e.g., toast-bottom-left).^[600-developer-frontend-js-plugin-js-plugin.md]
  • Visual Feedback: A progress bar can be enabled via progressBar to indicate the time remaining before the message disappears.^[600-developer-frontend-js-plugin-js-plugin.md]
  • Animation: Users can define the duration and easing curves for showing (showEasing, showMethod) and hiding (hideEasing, hideMethod) notifications.^[600-developer-frontend-js-plugin-js-plugin.md]
  • Interaction: Optional settings include a close button (closeButton), preventing duplicate messages (preventDuplicates), and defining click actions (onclick).^[600-developer-frontend-js-plugin-js-plugin.md]

Usage

Basic implementation involves setting the desired options within toastr.options and then calling the appropriate message type method.^[600-developer-frontend-js-plugin-js-plugin.md]

The primary methods for triggering notifications are: * toastr.success("Success") * toastr.warning("Warning") * toastr.error("Error")^[600-developer-frontend-js-plugin-js-plugin.md]

  • [[JavaScript]]
  • [[Frontend]]
  • [[Notification UI]]
  • [[User Feedback]]

Sources

^[600-developer-frontend-js-plugin-js-plugin.md]