Sticky alerts (Toasts)

[findelallc]

I just tried to use Sticky alerts (Toasts) but unfortunately for Toasting a precompiled alert version there is no dismiss-able button or option which surely would require, foolish UX flaw generally speaking.

Any luck? is it there already or when can it be expected?

[halfmoonui]

I don't exactly understand what you are asking. Are you asking for a close button inside a pre-compiled alert?

[findelallc]

in simple word YES, now I manage to write click handler to close it, I think it should have an option to close with animation, the same way it's opened.

[halfmoonui]

But you can just put a close button inside your pre-compiled alert like so: <button class="close" data-dismiss="alert" type="button" aria-label="Close">&times;</button>. Clicking that will dismiss that alert, exactly like it dismisses the other sticky alerts.

[findelallc]

No it doesn't work.

[halfmoonui]

Kindly post the code or at least make a Codepen. It worked for me, and there is no reason it shouldn't. Edit: https://jsfiddle.net/pg2h8dt7/

[findelallc]

I am using react next js to work with your plugin

<div className="sticky-alerts bottom-0" style={{top: "auto", right: -75}}>
  <div className="alert card shadow-lg border-0 w-three-quarter filled mr-0" id="precompiled-alert-1">
    <div className="d-flex justify-content-between">
      <h6 className="text-theme-color my-auto font-weight-bold">Blockchain Metrics Notification</h6>
      <button class="close" data-dismiss="alert" type="button" aria-label="Close">&times;</button>
    </div>
  </div>
</div>

[halfmoonui]

Since you are using React, I recommend the following:

1. Make sure you are calling the halfmoon.onDOMContentLoaded() method, preferably on route change. Reference: https://www.gethalfmoon.com/docs/download/#using-npm
2. Make sure you are aware of binding issues with React: https://github.com/halfmoonui/halfmoon#using-react

Please let me know if that solves your problem. If this doesn't solve it, I would recommend posting a question on a React/Next.JS support forum, maybe even Stack Overflow.

[findelallc]

This is how I achieved it -

<div className="sticky-alerts bottom-0" style={{top: "auto", right: -75}}>
  <div className="alert card shadow-lg border-0 w-three-quarter filled mr-0" id="precompiled-alert-1">
    <div className="d-flex justify-content-between">
      <h6 className="text-theme-color my-auto font-weight-bold">Blockchain Metrics Notification</h6>
      <a onClick={this.dismissNotification.bind(this)} className="btn btn-link text-deep-purple-color my-auto">
           <i className="fas fa-times"/>
      </a>
    </div>
  </div>
</div>

Method:

dismissNotification = () => {
   document.getElementById("precompiled-alert-1").style.display = "none";
};