Add dismissal button about react-hot-toast HOT 7 OPEN

It definitely would be great to have a built-in dismiss option. I still want to try out a couple of options to figure out what works best on mobile & desktop. I'm currently thinking of tap, swipe or a button to dismiss.

from react-hot-toast.

According to me, in the ideal case scenario, it should be a swipe on the mobile and "X" button as suggested by @Twixes on the web as both of these are the most convenient way according to me.

from react-hot-toast.

+1 for swiping on mobile. Does anyone have an example?

from react-hot-toast.

If anyone like me googled to find a way to do this here is an example:

const duration = 10000;
const toastContent = (t) => (
  <span>
    {notification.message}
    <button
      onClick={() => toast.dismiss(t.id)}
      className="close-button"
      type="button"
    >
      ×
    </button>
  </span>
);
toast.success(toastContent, { duration });

CSS:

.close-button {
  position: absolute;
  top: 3px;
  right: 5px;
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 20px;
  padding: 0px;
  line-height: 1;
  color: #333;
}

from react-hot-toast.

It should be made available, to have an option to set value true or false for "X" button. There could also be an option to set each notification visible time(duration).

from react-hot-toast.

@mrjatinchauhan I agree, an "X" button/icon should be an available opt-in option.

There is currently an option to set the duration. You can set the default duration for all toasters or for each type individually.

from react-hot-toast.

If anyone like me googled to find a way to do this here is an example:

const duration = 10000;
const toastContent = (t) => (
  <span>
    {notification.message}
    <button
      onClick={() => toast.dismiss(t.id)}
      className="close-button"
      type="button"
    >
      ×
    </button>
  </span>
);
toast.success(toastContent, { duration });

CSS:

.close-button {
  position: absolute;
  top: 3px;
  right: 5px;
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 20px;
  padding: 0px;
  line-height: 1;
  color: #333;
}

Is it possible to do something similar but using toast.promisse() ?
It seems like it only allow plaintext, not html.

from react-hot-toast.