Skip to content

Instantly share code, notes, and snippets.

@erikbrannstrom
Created March 21, 2014 15:16
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save erikbrannstrom/9688540 to your computer and use it in GitHub Desktop.
ConfirmButton component for React. Require two clicks with a minimum delay between in order to go through with the action.
var React = require('react');
var ConfirmButton = React.createClass({
propTypes: {
onClick: React.PropTypes.func,
waitTime: React.PropTypes.number,
confirmText: React.PropTypes.string,
},
getInitialState: function() {
return {
isClickable: true,
confirmMode: false
};
},
firstClick: function (event) {
if (event.metaKey === true || event.ctrlKey === true) {
this.props.onClick();
return;
}
this.setState({
isClickable: false,
confirmMode: true
});
var self = this;
window.setTimeout(function () {
self.setState({ isClickable: true });
}, this.props.waitTime || 500);
},
render: function () {
var onClick = this.firstClick;
var content = this.props.children;
if (this.state.confirmMode === true) {
onClick = this.props.onClick;
content = this.props.confirmText || 'Click to confirm';
}
return (
<button className={ this.props.className } onClick={ onClick } disabled={ !this.state.isClickable }>{ content }</button>
);
}
});
module.exports = ConfirmButton;
@erikbrannstrom
Copy link
Author

Based on http://blog.streambur.se/2014/03/confirming-destructive-ui-actions/

Example usage:

<ConfirmButton className="btn btn-dangerous" onClick={ this.delete } waitTime={ 1000 }>Click to delete</button>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment