ConfirmButton component for React. Require two clicks with a minimum delay between in order to go through with the action.

ConfirmButton.jsx

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;

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>