Nextjs Core Snackbar

import React from "react";

import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import AddAlert from "@material-ui/icons/AddAlert";

export default function Example() {
  return (
    <>
      <SnackbarContent message={"This is a plain notification"} color="info" />
      <SnackbarContent
        message={"This is a notification with close button."}
        close
        color="info"
      />
      <br />
      <SnackbarContent
        message={
          "This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style."
        }
        close
        icon={AddAlert}
        color="info"
      />
      <br />
      <SnackbarContent
        message={
          'This is a notification with close button and icon and is made with color="rose". You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don\'t have to worry about the style.'
        }
        close
        icon={AddAlert}
        color="rose"
      />
    </>
  );
}

import React from "react";

import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import AddAlert from "@material-ui/icons/AddAlert";

export default function Example() {
  return (
    <>
      <SnackbarContent
        message={'INFO - This is a regular notification made with color="info"'}
        close
        color="info"
      />
      <SnackbarContent
        message={
          'SUCCESS - This is a regular notification made with color="success"'
        }
        close
        color="success"
      />
      <SnackbarContent
        message={
          'WARNING - This is a regular notification made with color="warning"'
        }
        close
        color="warning"
      />
      <SnackbarContent
        message={
          'DANGER - This is a regular notification made with color="danger"'
        }
        close
        color="danger"
      />
      <SnackbarContent
        message={
          'PRIMARY - This is a regular notification made with color="primary"'
        }
        close
        color="primary"
      />
      <SnackbarContent
        message={
          'ROSE - This is a regular notification made with color="primary"'
        }
        close
        color="rose"
      />
    </>
  );
}

SnackbarContent.defaultProps = {
  color: "info"
};

SnackbarContent.propTypes = {
  message: PropTypes.node.isRequired,
  color: PropTypes.oneOf([
    "info",
    "success",
    "warning",
    "danger",
    "primary",
    "rose"
  ]),
  // this is used to create the close button
  close: PropTypes.bool,
  icon: PropTypes.func
};

import React from "react";
// @material-ui/icons
import AddAlert from "@material-ui/icons/AddAlert";
// core components
import Snackbars from "components/Snackbar/Snackbar.js";
import Button from "components/CustomButtons/Button.js";

export default function Example() {
  React.useEffect(() => {
    // Specify how to clean up after this effect:
    return function cleanup() {
      // to stop the warning of calling setTl of unmounted component
      var id = window.setTimeout(null, 0);
      while (id--) {
        window.clearTimeout(id);
      }
    };
  });
  const [tl, setTl] = React.useState(false);
  return (
    <div>
      <Button color="primary" onClick={() => {
          setTl(true);
          // use this to make the notification autoclose
          setTimeout(
            function() {
              setTl(false)
            },
            6000
          );
        }}>
        Top Left
      </Button>
      <Snackbars
        place="tl"
        color="info"
        icon={AddAlert}
        message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
        open={tl}
        closeNotification={() => setTl(false)}
        close
      />
    </div>
  );
}

Snackbar.defaultProps = {
  color: "info",
};

Snackbar.propTypes = {
  message: PropTypes.node.isRequired,
  color: PropTypes.oneOf([
    "info",
    "success",
    "warning",
    "danger",
    "primary",
    "rose",
  ]),
  close: PropTypes.bool,
  icon: PropTypes.object,
  place: PropTypes.oneOf(["tl", "tr", "tc", "br", "bl", "bc"]),
  open: PropTypes.bool,
  closeNotification: PropTypes.func,
};