A React confirm component. It does not work like the native Window.confirm(), but instead takes an `action` argument, which is the function to execute if the user confirms.
npm install react-confirm-dialogaction argument, which is the function to execute if the user confirms.
body using a portal.
import ConfirmLink from 'react-confirm-dialog';
class App extends React.Component {
alertSum(args) {
alert(args.a + args.b);
}
render() {
return (
Click me to trigger the confirm popup
);
}
}
`
Props
- action: The action to perform when the user clicks the confirm button.
- actionArgs: Arguments to be passed to the action.
- confirmMessage: The message to display to the user in the confirm dialog (defaults to "Are you sure that you want to do this?").
- confirmText: The text to display in the confirm button (defaults to "Yes please").
- cancelText: The text to display in the cancel button (defaults to "No thank you").
$3
You can change the default props globally for all confirms with ConfirmLink.defaultProps[prop_name].
Eg. ConfirmLink.defaultProps.confirmMessage = 'Say this by default in all confirm messages';
Styling
There are two styles included in Confirm.css for the modal background and the confirm content:
`
.react-confirm-dialog-bg {
...
}
.react-confirm-dialog-content {
...
}
`
These have minimal properties to create a modal effect.
To style the confirm and cancel buttons, add styles for the class combinations react-confirm-dialog-button confirm and react-confirm-dialog-button cancel`