react-confirm-button

Install

npm install --save react-confirm-button

You may install bootstrap or material-ui or any other styling, as desired.

Usage

import ConfirmButton from 'react-confirm-button';

...

  <div>

    <p>Basic Confirmation Button</p>
    <ConfirmButton
      onConfirm={() => console.log('I have Confirmed')}
      text="Do Stuff"
      confirming={{
        text: "Are you sure?"
      }}
    />

    <p>Fully Customized Button</p>
    <ConfirmButton
      disableAfterConfirmed
      onConfirm={ action('confirmed') }
      text="Button is Active"
      className="btn btn-primary btn-lg"
      style={{ borderColor: 'yellow' }}
      confirming={{
        text: 'Button is Confirming',
        className: 'btn btn-info btn-sm',
        style: { borderColor: 'green' },
      }}
      disabled={{
        text: 'Button is Disabled',
        className: 'btn btn-secondary text-muted',
        style: { borderColor: 'red' },
      }}
    />
  </div>

See more examples and demos on storybook @ zeroasterisk.github.io and the source code for those examples in the stories

Dependancies

• React

Roadmap

• [x] support children content as confirm text?
• [x] support disabled state
• [x] make CSS framework agnostic
• [ ] make redux version?

Acknowledgements

Coded during a JSLou Meetup

Awesome Tools Used:

• react-cdj
• react-storybook
• webpack bootstrap-loader