react-confirm-alert
react component confirm dialog. Live demo
Document for v.1.x.x see
Getting started
Install with NPM:
$ npm install react-confirm-alert --save
Options
const options = {
title: 'Title',
message: 'Message',
buttons: [
{
label: 'Yes',
onClick: () => alert('Click Yes')
},
{
label: 'No',
onClick: () => alert('Click No')
}
],
childrenElement: () => <div />,
customUI: ({ onClose }) => <div>Custom UI</div>,
closeOnEscape: true,
closeOnClickOutside: true,
willUnmount: () => {},
onClickOutside: () => {},
onKeypressEscape: () => {}
};
confirmAlert(options);
Use with function:
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import 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>
);
}
}
Custom UI Component
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>
);
}
});