0.1.1 • Published 8 years ago
react-decision v0.1.1
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.