javascriptbootstrap-5toastr

toastr options not working with bootstrap 5?


I have a web app that uses bootstrap and toastr.
I recently upgraded the bootstrap library from bootstrap4 to bootstrap5.
I then found out that toastr options do not work properly.
For example the toastr.options timeOut, extendedTimeOut don't respond to their new values.
The toast is raised for a short duration, regardles the values that I set for toastr.options.timeout.

The call to the toastr is:

let toastrSettings = { 
    timeOut: 5000,
    extendedTimeOut: 5000
};

toastr.error('Some message', 'Some Title', toastrSettings);

Could it be that toastr (toastr/2.1.4/toastr.min.js) does not work with bootstrap 5?

Alternatively I see bootstrap toasts and alerts.
But there it looks like the toast is set into the DOM.
If toastr does not work with bootstrap 5, I'm looking or a library that provides the option to set dynamically the title and content, similarly to toastr.

Thanks


Solution

  • I mistakenly thought that adding bootstrap 5.x.x caused the problem.
    But the root cause was that a bit later in the code after raising the toast I had:
    toastr.clear();
    which caused the toast to disappear regardless of the extended timeout.
    So my conclusion is that bootstrap 5.x.x and toastr can coexist.