Hello,
I have the problem that the toast is coming from the bottom of the top of the page and not top or bottom of the screen so if I am scrolling the page or using it on a tall page, I cannot see the toast anymore, is there a fix? Currently, the website using it is embedded within an iframe thought I am not sure if that is matter or not. Please kindly advise,

In firefox browser, the toastr is showing more extra space than its content

Hello.
First of all I have to say that this is a great library. I am using it on an ESP32 and it works flawlessly.

What do you think about adding a hover effect for toast-close (the X button) for a better visibility on Desktop.
I am currently using this in my implementation:

.toast-close:hover {
    opacity: 1;
}

Thank you.
Have a nice day.

First, thanks for an awesome library!

I have a use case that I want to display a structured HTML in a toast message, not just plain text, I want to display an image and some styled text as well.

Wonder if I could do the above behavior with some options such as

Toastify({
  type: "html",
  content: contentInHtml
})

Toastify({
  type: "text",
  content: contentInPlainText
})

adding selector as a css ID defined for a DOM element, throws error.

Toastify({
    text: message,
    duration: 5000,
    position: "center",
    selector: "main",
    className: `alert alert-info`,
  }).showToast();

And the HTML element it is supposed to be added to:

<main id="main"></main>

The error being thrown is:

Uncaught Root element is not defined

Hi,
first of all thank you guys
I wonder if there is a way or function to dismiss the toas from outside the toast,
like the close button but external to th toast

If there is, please add the function to the documentation and some example if posible
Thanks !!

The avatar is always showing on the right. if our toast is positioned left then the close button shows in the left and avatar seem to be on right place but for the center and right position, it might have to move on the left. and also I cannot add icons. I was intending to use a font awesome icon or feather icon but can't use it.

Hi
was wondering browser support.
Does it work in ie8

These classes are way too generic

You can find these names in CSS frameworks or in some base website stylesheets, it could conflict and cause unwanted effects.

Suggestion: use a prefix for all of them, like .toastify-right, .toastify-left and so on.

I've noticed the configurations available for the user are only for each toast, but not as global options that affects all toasts. This is the case of the feature requested on the issue #70.

As I already have made some local changes to address both the issue #70 and this one, I'm pushing a pull request as a initial proposal to be discussed with the contributors.

is that, by the way that good lib :)!

If I do NOT set a backgroundColor option when calling Toastify, but add a className that maps for instance to a Bootstrap alert class, the Toast's default backgroundColor still takes precedence over the class' background color.

i.e.

 Toastify({
    text: "A simple warning alert—check it out!",
    duration: 3000,
    close: true,
    gravity: "bottom",
    positionLeft: false,
    className:"alert alert-warning>"
    }).showToast();

Should yield the following:

Instead I get:

Create an configuration to change offset of top and left. E.g:

Position: top-right with offset top: 80px because of navbar height.

Toastify({ style: { backgroundColor: '#dc3545' } }).showToast(); Not Working...

default:
background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
background: linear-gradient(135deg, #73a5ff, #5477f5);

The clearing and adding back of timeout is included inside if(this.options.close === true) meaning when this.options.close is unset or false, then stopOnFocus (and the default of stopOnFocus being true) will have no effect

Hello,
first of all nice library ! 🎉
Quite clean with nice support.

would be nice to have in the options 🙏 the possibility to setup:

• space between toast ( like margin between each other )
• choose the wrapper className
• Pass html instead of only a string ( i need to create a toast with a tiny thumbnail image for example or links and its not possible 😢)

And as an improvement 💡 i think its way better to use transform translate instead of top/bottom to move objects for the performance

Thanks in advance

When I set classname:error,it didn't have any diffent.

I saw the commits included a "persistent" option so I tried duration: 0 or not including duration but the toast will still fade out. Please include the option in the docs or fix it, thanks.

for best accessibility:
button for interactive
a for links

Sometimes this is useful. I'm pushing a pull request to add this feature.

The default option for stopOnFocus (#21, #22) cannot be changed to a falsey value:

false || true is still true, so setting stopOnFocus: false will do nothing. The best way to fix this would be to instead use ES6 default parameters, something like:

init: ({
  // ... other options
  stopOnFocus = true
} = {}) => {
  // ...

  if (stopOnFocus) {
    // ...
  }
}

Is there any way to close / dismiss on click?

sais Toastify is not a function

Using this library in IE11 no longer work out of the box.

line 127 etc:

      for (const property in this.options.style) {
        divElement.style[property] = this.options.style[property];
      }

Replacing const with var fixes this.

Also note that ShadowRoot (line 266) is not supported in IE11. Therefore the selector parameter needs to be passed when calling a Toastify:

Toastify({
  text: "This is a toast",
  duration: 3000,
  destination: "https://github.com/apvarun/toastify-js",
  newWindow: true,
  close: true,
  gravity: "top", // `top` or `bottom`
  position: "left", // `left`, `center` or `right`
  style: { "background-image" : "linear-gradient(to right, #00b09b, #96c93d)",
  stopOnFocus: true, // Prevents dismissing of toast on hover
  onClick: function(){} // Callback after click,
  selector: document.body // <= IE11 needs this.
}).showToast();

Hello,

please update that: https://github.com/apvarun/toastify-js/releases to corresponds actual releases available in https://github.com/apvarun/toastify-js/blob/master/CHANGELOG.md file.

Mainly because, I can't download this library via bower install:

bower.json:
"toastify-js": "apvarun/toastify-js#^1.3.1"

produces:

bower install

bower toastify-js#^1.3.1 not-cached https://github.com/apvarun/toastify-js.git#^1.3.1
bower toastify-js#^1.3.1 resolve https://github.com/apvarun/toastify-js.git#^1.3.1
bower toastify-js#^1.3.1 ENORESTARGET No tag found that was able to satisfy ^1.3.1
 
Additional error details:
Available versions in https://github.com/apvarun/toastify-js.git: 1.1.0, 1.0.0, 0.0.1

the close icon should be sticked to the right side according to the position , otherwise it is very difficult to find th close button when having long text of exception.

I'm using Rails 6. Adding toastify-js into Webpack, I got this error:

Uncaught Root element is not defined

Error seem from this line:
https://github.com/apvarun/toastify-js/blob/master/src/toastify.js#L202

This'd be especially useful for integrating with async test frameworks

If close is set to true and duration is not infinite, and close is clicked, then the mouse is moved off where the toast would have been (or is still animating), a second timeout is created to hide the element.
As the element will already be hidden by the time that second timeout executes (due to the immediate close function), the element is null and removeChild throws a TypeError.

I have a couple of suggestions to fix this, not sure what would be preferred.

1. I tried setting pointer-events to none as soon as closing, then once hidden removed pointer-events, but for some reason the css didnt update or something and the mouseout was still firing. To get around this I explicitly checked the pointer-events attribute before setting the mouseout timeout, that seemed to work well.
2. Create a variable within the Toastify object called isClosing. Set to true when close is clicked, and set to false once the element is completely hidden. Check for isClosing before setting the mouseout timeout.

I am pulling Toastify JS from the CDN. Just now I've realized that the property style.background is no longer working, and my toasts are using the built-in style from toastify.css instead. (I did force reload all my resources to ensure that it wasn't a stale version.) The property backgroundColor still works, but this gives me a deprecation warning.

I think text should have an option to be HTML

For ultimate control and styling, I would like to optionally pass HTML div with arbitrary content as arg. In my case I'd like to include small chart or buttons, small table etc. Any plans for such a feature?

Any help how i can add html inside the toastify js.

I'm not sure if this issue is for Toastify or Vite, so I'm posting it in both projects.

I'm using Toastify in a Vue 3 app, built with Vite. I have 0 problem during development, but Toastify stops working once the app is built for production.

I have the following code:

import * as Toastify from 'toastify-js'

public static showToast({ text, duration = 5000, backgroundColor }:
    {
      text: string,
      duration: number,
      backgroundColor?: string
    }): void {
    Toastify({
      text,
      duration,
      close: true,
      backgroundColor,
      gravity: 'bottom',
      className: 'darkBlueBorder',
      stopOnFocus: true
    }).showToast()
  }

Once built, the code looks like this (excerpt from the compiled file):

static showToast({
        text: e,
        duration: t = 5e3,
        backgroundColor: s
    }) {
        $({
            text: e,
            duration: t,
            close: !0,
            backgroundColor: s,
            gravity: "bottom",
            className: "darkBlueBorder",
            stopOnFocus: !0
        }).showToast()
    }

It looks like Toastify({/**/}) has been replaced with $({/**/}), but $ is never declared. Each time I call myToastService.showToast(), it throws the error

index.be090574.js:1 TypeError: $ is not a function
    at Function.showToast (index.be090574.js:1)
    at Function.showSuccess (index.be090574.js:1)
    at Proxy.saveChanges (index.be090574.js:1)

Toast is great, one feature that would be helpful is an option to disable the timeout feature on a notification when it has focus (hover or touch). This would allow visitors to focus on longer messages giving them time to read the whole thing without it disappearing. Maybe the option could be hideOnFocus: and then be set to true or false.

For context, this was bought up within Nextcloud at nextcloud/server#15124 (review)

Hello,
escaping of HTML markup does not work, if I pass even a small HTML code it is written but not interpreted.

It creates a problem also because I need to escape characters like 'è' that are not correctly displayed but the corresponding HTML tag (è) is displayed as is and not interpreted.

The docs show offset as a property that can be used to more precisely position the toast notification. Looking at toastify -> init function: https://github.com/apvarun/toastify-js/blob/master/src/toastify.js#L30

Expected behavior:
When offset is provided as part of the options object, it is used to determine the positioning of the toast notification.

Current behavior:
offset option does not appear to be used in the toast construction.

What about an option to disable the way toasts stack one on another and let them always be generated one on top of eachother, occupying only one space ?

Example here when the progress bar option is checked: https://codeseven.github.io/toastr/demo.html

Hi
I copied your example from docs but it doesn't work. Do I need additional CSS for it to work?

Toastify({
text: "This is a toast",
duration: 3000,
destination: 'https://github.com/apvarun/toastify-js',
newWindow: true,
close: true,
gravity: "top", // top or bottom
positionLeft: true, // true or false
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
}).showToast();

thanks

If I show one message it disappears. No problem but if i show multiple messages then only first one disappears rest are keeps alive.

here is my message below

toast.lib.init({
text: message,
duration: 3000,
newWindow: false,
close: true,
gravity: "top",
position: 'right',
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
stopOnFocus: true,
}).showToast();

How can I run a function on click toast?

Current Implementation:

Should be;

I was using svelte -toast library https://zerodevx.github.io/svelte-toast/ , but toastify-js is what i really wanted a pure js library so that i don't have to work around and keep adding html and css everywhere. indeed a very useful and wonderful idea . great work guys. thanks to all contributors. I was wondering if i can contribute in it to add progress bar like here https://zerodevx.github.io/svelte-toast/ .

Please let me know your views ideas of if anyone can add it it will be good too.

I think this feature will add good value.

You might be difficult for one to notice but when transition stop it ends with jerking instead of smoothly. Is there anything i am missing or should i have to do anything additional ?

Note: i am using Bootstrap 4 + Popper Js + JQuery Js.

Order of scripts are as follow:

• toastify-js.js
• jquery.min.js
• popper.min.js
• bootstrap.min.js

Hello,

Since it is possible to add a string of characters within the content, it would be nice to also be able to customize the closing button with inline SVG, img tag, etc.

Ex:

Toastify({
  text:
    "<p class='notification-p'>" +
      "Simple Exemple." +
     "</p>",
     duration: 3000,
     close:
       "<svg class='icon' aria-hidden='true'>" +
         "<use xlink:href='assets/icons/icons.svg#favorites'></use>" +
       "</svg>",
}).showToast();

If the close property is mentioned then its value is true. Then we can directly add our HTML markup.

What do you think ?

Hello, nice library.

I have problems to implement classes option, I noticed that npm code is outdated.
Could you please update npm package?
thanks

edited: here is a preview https://unpkg.com/[email protected]/src/toastify.js
classes option code is missing

Since almost all major JavaScript bundlers have better built-in code splitting, tree-shaking and compile time optimizations in place. it is ideal to have an ES6 version of the package along with the current ES5 version.

would it be possible to add the following css tags?

background-color: # 000000,
color: # 000000,
font-family: "...",
font-size: 10px,

Or directly a style option: "",?
in which we can directly put the css tags of our choice.