importReactConfirmAlert,{confirmAlert}from'react-confirm-alert';// Importimport'react-confirm-alert/src/react-confirm-alert.css'// Import cssclassAppextendsReact.Component{submit=()=>{confirmAlert({title: 'Confirm to submit',// Title dialogmessage: 'Are you sure to do this.',// Message dialogconfirmLabel: 'Confirm',// Text button confirmcancelLabel: 'Cancel',// Text button cancelonConfirm: ()=>alert('Action after Confirm'),// Action after ConfirmonCancel: ()=>alert('Action after Cancel'),// Action after Cancel})};render(){return(<divclassName="container"><buttononClick={this.submit}>Confirm dialog</button></div>);}}
Use with component:
importReactConfirmAlert,{confirmAlert}from'react-confirm-alert';// Importimport'react-confirm-alert/src/react-confirm-alert.css'// Import cssclassAppextendsReact.Component{state={showDialog: false,}render(){return(<div>{this.state.showDialog&&<ReactConfirmAlerttitle="Confirm to submit"message="Are you sure to do this."confirmLabel="Confirm"cancelLabel="Cancel"onConfirm={()=>alert('Action after Confirm')}onCancel={()=>alert('Action after Cancel')}/>}</div>);}}