The default design is not usable

[ritz078]

The default design is very much different than a design that is used most of the times. Below are the most commonly used designs.

[fkhadra]

Hello @ritz078,

The purpose of react-toastify was to offer a kind of backbone to start to implement notification.

I don't want the component style to be opinionated. That's why it's really easy to style. A few line of css and you can roll your own style.

But maybe it will be good if I provide some kind of theme? Like a bootstrap theme or material theme.

What do you think?

[ritz078]

Lets see this way :

• current default design : direct usability = very low
• the one I preferred: definitely more people will use it in default who are in need of simple toasts and don't want to care about design.

If we are providing a basic design why not make it such that it can be consumed directly for more number of users ?

Anyways if someone wants to change the design he has to change from scratch.

Dependency on any theme won't be a good idea as people are now moving away from CSS frameworks.

[fkhadra]

I got your point. I'll use what you suggested.

[rsomlette]

I agree that the default design forced me to change my implementation of the toast.
However I'm quite satisfied how things works on my end now. I've a wrapper around the Toast, which allow me to pass a different design on the default toast depending the function I call.

For the ToastContainer I pass the following class to let my custom toast use the full container`

.custom-toast {
  .toastify-content {
    opacity: 0.7;
    border-radius: 5px;
    padding: 0;

    &:hover {
      opacity: 1;
    }
  }

  .toastify {
    &__progress {
      border-radius: 0 0 0 5px;
      background: $main-content-background;
    }

    &__close {
      &.toast-close-image {
        margin-top: 0.3em;
        margin-right: 0.2em;
        background: url('./assets/images/icons/ic-cross-feedback.svg') center no-repeat;
      }
    }
  }
}

Then i created my own design for each alert (success, info, alert, error) which I just pass inside the default Toast.
Having this already set, might be easier for newcomers.
Be careful to not break the current setup if you decide to go with this.

[ritz078]

@fkhadra Thanks. This shouldn't be a part of 1.7.1. Since this change won't be backward compatible, you should make a 2.0.0 release.

@Niphery I think the versioning should take care of that.

[fkhadra]

@ritz078 Indeed v2 make sense. I hate breaking changes.

I'll do a first implementation and share the result before push a new version

[fkhadra]

Hey @ritz078 and @Niphery,

Check the gif, what do you think?

Thanks

[pepepaco]

i like it!

[fkhadra]

@pepepaco Thanks !

[ritz078]

This is great.