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

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

Acknowledgements

Coded during a JSLou Meetup

Awesome Tools Used:

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