Nextjs React Bootstrap Sweetalert

-
Pro Component

Our Nextjs Sweet Alerts are beautiful, responsive, customisable, accessible replacements for Javascript’s popup boxes.
Keep reading our Nextjs Alerts examples and learn how to use this plugin.


Styles

You will find the styles for this component in assets/scss/nextjs-material-dashboard-pro/plugins/_plugin-react-bootstrap-sweetalert.scss.

Example

Check out more examples on our live preview here.

import React from 'react';
// react component used to create sweet alerts
import SweetAlert from "react-bootstrap-sweetalert";
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
// core components
import Button from "components/CustomButtons/Button.js";
// styles for buttons on sweetalert
import styles from "assets/jss/nextjs-material-dashboard-pro/views/sweetAlertStyle.js";

const useStyles = makeStyles(styles);

const sweetAlertStyle = { display: "block", marginTop: "-100px" }

export default function SweetAlertDemo(){
  const classes = useStyles();
  const [alert,setAlert] = React.useState(null);
  const hideAlert = () => {
    setAlert(null);
  }
  const successAlert = () => {
    setAlert(
      <SweetAlert
        success
        style={ sweetAlertStyle }
        title="Good job!"
        onConfirm={() => this.hideAlert()}
        onCancel={() => this.hideAlert()}
        confirmBtnCssClass={
          classes.button + " " + classes.success
        }
      >
        You clicked the button!
      </SweetAlert>
    );
  }
  return (
    <div>
      {this.state.alert}
      <Button color="rose" onClick={this.successAlert.bind(this)}>
        Try me!
      </Button>
    </div>
  );
}

Props

If you want to see more examples and properties please check the official react-bootstrap-sweetalert Documentation.

You can also check the Official Github Repository.