Material-UI React Bootstrap Sweetalert

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

Example

Check out more examples on our live preview here.

import React from “react”; // react component used to create sweet alerts import ReactBSAlert from “react-bootstrap-sweetalert”; // @material-ui/core components import Button from “@material-ui/core/Button”; // @material-ui/icons components // core components

const NotificationsView = () => { const [alert, setalert] = React.useState(false); const basicAlert = () => { const styles = { display: “block”, marginTop: “-100px” } const btnStyles = { marginRight: undefined, borderColor: undefined, boxShadow: undefined, } setalert( <ReactBSAlert style={styles} title=”Here’s a message!” onConfirm={() => setalert(null)} onCancel={() => setalert(null)} btnSize=”” confirmBtnStyle={btnStyles} text=”A few words about this sweet alert …” > A few words about this sweet alert … </ReactBSAlert> ); }; return ( <> {alert} <Button color=”primary” variant=”contained” onClick={basicAlert} > Basic alert </Button> </> ); };

export default NotificationsView;

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.