Material notifications PRO does NOT appear to work


Topic: Material notifications PRO does NOT appear to work

Filip Jurcicek asked 3 years ago

Expected behavior

Actual behavior

https://mdbootstrap.com/docs/react/advanced/notifications/ Material notifications PRO example does not have render function. Example does not work when tested. When tired to fix it, it does not work.

Resources (screenshots, code snippets etc.)


Jakub Chmura staff premium answered 3 years ago

Hi @Filip Jurcicek

We know about this issue.

There is a problem importing the styles of the TOAST component. To solve this problem you need to manually import style toast.

I paste here working code snippet with toast style import:

import React, { Component } from "react";
import { toast, ToastContainer, MDBContainer, MDBBtn } from "mdbreact";

class Notification extends Component {
  const notify = type => {
    return () => {
      switch (type) {
        case "info":
          toast.info("Info message", {
            closeButton: false
          });
          break;
        case "success":
          toast.success("Success message", {
            closeButton: false
          });
          break;
        case "warning":
          toast.warn("Warning message"{
            closeButton: false
          });
          break;
        case "error":
          toast.error("Error message"{
            closeButton: false
          });
          break;
        default:
          toast.error("Error message"{
            closeButton: false
          });
      }
    };
  };

  return (
    <MDBContainer>
      <div>
        <MDBBtn color="info" onClick={notify("info")}>
          Info
        </MDBBtn>
        <hr />
        <MDBBtn color="success" onClick={notify("success")}>
          Success
        </MDBBtn>
        <hr />
        <MDBBtn color="warning" onClick={notify("warning")}>
          Warning
        </MDBBtn>
        <hr />
        <MDBBtn color="danger" onClick={notify("error")}>
          Error
        </MDBBtn>
        <ToastContainer
          hideProgressBar={true}
          newestOnTop={true}
          autoClose={5000}
        />
      </div>
  );
};

export default Notification;

Best regards,

Kuba


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.21.0
  • Device: PC
  • Browser: chrome
  • OS: ubunto 19.04
  • Provided sample code: No
  • Provided link: Yes