Decision
A react decorator for clickable items to confirm user intent.
npm install react-decision
Use <Decision> to wrap an item that has an onClick prop. When clicked, the user will be presented with a modal to confirm their intentions before continuing the onClick or aborting.
Usage
Can either be used standalone (uses <button>), or wrap a component that has an onClick property.
Standalone example
<Decision onClick=deleteImportantStuff>delete?!</Decision>Wrapping
<Decision> <button onClick=deleteImportantStuff>delete?!</button></Decision>With props
<Decision header="Delete this?!" message="Are you sure though?" positiveLabel="Yep" negativeLabel="Nope" > <button onClick=deleteImportantStuff>delete?!</button></Decision>props
- header:
String, header text in modal - message:
String, message text in modal - positiveLabel:
String, label for the positive/continue button. - negativeLabel:
String, label for the negative/cancel/abort button. - useFlex:
Boolean, defaults to true, uses flexbox to centre the modal. Otherwise repositions vertically based on dynamic height.
If using standalone, you can also use:
- onClick:
function, called when the blocking modal receives positive confirmation. - className:
String, classnames passed through to the generated button.