confirm-modal.js

import React from 'react'
import Modal from 'react-modal/lib/index'

Modal.setAppElement(document.getElementById('codio'))
Modal.injectCSS()

export default React.createClass({
    displayName: 'ModalConfirm',

    propTypes: {
        onClose: React.PropTypes.func
    },

    getDefaultProps() {
        return {
            onClose: function (e) {
                console.log('modal', e)
            }
        }
    },

    getInitialState() {
       return { modalIsOpen: false }
    },

    openModal() {
       this.setState({modalIsOpen: true})
    },

    closeModal() {
       this.setState({modalIsOpen: false})
    },

    // Opportunity to validate something and keep the modal open even if it requested to be closed.
    handleNo() {
        this.setState({modalIsOpen: false})
    },

    render() {
        return (
            <Modal className='modal-dialog' isOpen={this.state.modalIsOpen} onRequestClose={this.handleNo}>
                {this.props.children}
                <div className='modal-footer'>
                    <button type='button' className='btn btn-primary' onClick={this.handleYes}>Yes</button>
                    <button type='button' className='btn btn-default' onClick={this.handleNo}>No</button>
                </div>
            </Modal>
        )
    }
})

gistfile1.txt

                <ConfirmModal ref='logoutConfirmModal'>
                    <ModalHeader>Sign Out</ModalHeader>
                    <ModalBody>
                        <h3 className='centered'>Are you sure you wish to sign out?</h3>
                    </ModalBody>
                </ConfirmModal>

modal-header.js

import React from 'react'
import Icon from '../icon'

export default React.createClass({
    displayName: 'ModalHeader',

    propTypes: {
        onClose: React.PropTypes.func
    },

    getDefaultProps() {
        return {
            onClose: function (e) {
                console.log('header', e)
            }
        }
    },

    render() {
        return (
            <div className="modal-header">
                <button type="button" className="close" onClick={this.props.onClose}>
                    <span aria-hidden="true">&times;</span>
                </button>
                <Icon name='signout' />
                <h3 className="modal-title">{this.props.children}</h3>
            </div>
        )
    }
})