npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

react-decision

0.1.1 • Public • Published

Decision

npm version

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.

image


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.

install

npm i react-decision

Downloadsweekly downloads

4

version

0.1.1

license

none

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability