More settings, like setup the space between toast

[HectorLS]

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

[apvarun]

Sounds like great suggestions. I am welcome to pull requests with changes on the same. Let me know.

Meanwhile, there is an exposed API that lets you set a thumbnail image already. You can check it out.

[rndevfx]

For class names: https://github.com/apvarun/toastify-js/pull/5

[apvarun]

I think modifying the classes field to an array of class names while invoking would make more sense than having a string.

Like this:

Toastify({
    text: "This is a toast",
    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    classes: ["info", "transparent"]
}).showToast();

[rndevfx]

Yes, I agree that the naming is a little bit difficult now. But using class names as array is slower, because we have to join them later again. What about using

className: "info transparent" This is more generic (like in the toastify code itself) and could works for a single or multiple space separated class names.

[rndevfx]

@apvarun Created a new PR with the cleanup

[rndevfx]

@HectorLS It's possible to pass markup to your text as string.

Example:

Toastify({
  text: "<b>Bold</b> Hi",
  duration: 4500,
  gravity: "top",
  positionLeft: true
}).showToast();

Do you have a special case?

[HectorLS]

Sorry by the delay ! Awesome news @rndevfx , gonna update it !

Seems like there is only my first suggestion remaining. so cool. by now i just know that the space between toast is 15px so i'm substracting then. but its not the cleanest solution

$toast-space-between: 15px;

.toastify {
  @for $i from 1 through 30 {
    $element__position: $i + 'n';
    $value: $i * $toast-space-between;

    &:nth-child(#{$element__position}) {
      &.on {
        transform: translate(-50%, $value);
      }
    }
  }
}

So if you put a value < 15px would be the space, and of course can be negative to increase the default one.

[truongnmt]

Hi guys, reading the docs about Add own custom classes and this PR but I'm so confused. Still don't understand how to use.

Toastify({
  text: "This is a toast",
  backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
  className: "info",
}).showToast();

Then how we can use with that className without having write it again? 🤔 @rndevfx @apvarun