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.