const options = {
title: "Title",
message: "Message",
buttons: [
{
label: "Yes",
onClick: () => alert("Click Yes")
},
{
label: "No",
onClick: () => alert("Click No")
}
],
childrenElement: () => <div />,
customUI: ({ title, message, onClose, buttons }) => <div>Custom UI</div>,
willUnmount: () => {}
};
confirmAlert(options);
import { confirmAlert } from "react-custom-confirm-alert";
import "react-custom-confirm-alert/src/react-custom-confirm-alert.css";
class App extends React.Component {
submit = () => {
confirmAlert({
title: "Confirm to submit",
message: "Are you sure to do this.",
buttons: [
{
label: "Yes",
onClick: () => alert("Click Yes")
},
{
label: "No",
onClick: () => alert("Click No")
}
]
});
};
render() {
return (
<div className="container">
<button onClick={this.submit}>Confirm dialog</button>
</div>
);
}
}
confirmAlert({
customUI: ({ onClose }) => {
return (
<div className="custom-ui">
<h1>Are you sure?</h1>
<p>You want to delete this file?</p>
<button onClick={onClose}>No</button>
<button
onClick={() => {
this.handleClickDelete();
onClose();
}}
>
Yes, Delete it!
</button>
</div>
);
}
});
