react-bootstrap-window

React-Bootstrap window component, wrap around react-window-kit.

Install

npm install --save react-bootstrap-window

Usage

Modal

class ModalDemo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
    }

    render() {
        return (
            <div>
                <button onClick={this.openWindow.bind(this)}>open modal</button>
                <Modal
                    visible={this.state.show}
                    size='lg'
                    header='Title'
                    onHide={this.closeWindow.bind(this)}
                    onCancel={this.closeWindow.bind(this)}
                    onConfirm={this.closeWindow.bind(this)}
                    >
                    <h3>Hello Modal!</h3>
                </Modal>
            </div>
        )
    }

    openWindow() {
        this.setState({
            show: true
        })
    }

    closeWindow() {
        this.setState({
            show: false
        })
    }
}
React.render(<ModalDemo/>, document.getElementById('modal-demo'));

Confirm

class ConfirmDemo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
    }

    render() {
        return (
            <div>
                <button onClick={this.openWindow.bind(this)}>open confirm</button>
                <Confirm
                    visible={this.state.show}
                    title='Are you sure!'
                    onCancel={this.closeWindow.bind(this)}
                    onOk={this.closeWindow.bind(this)}
                    >
                    Hello Modal! Hello Modal! Hello Modal! Hello Modal! Hello Modal!
                </Confirm>
            </div>
        )
    }

    openWindow() {
        this.setState({
            show: true
        })
    }

    closeWindow() {
        this.setState({
            show: false
        })
    }
}
React.render(<ConfirmDemo/>, document.getElementById('confirm-demo'));

Tip

class ConfirmTip extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
    }

    render() {
        return (
            <div>
                <button onClick={this.openWindow.bind(this)}>open tip</button>
                <Tip
                    visible={this.state.show}
                    type='info'
                    title='Are you sure!'
                    onOk={this.closeWindow.bind(this)}
                    >
                    Hello Modal! Hello Modal! Hello Modal! Hello Modal! Hello Modal!
                </Tip>
            </div>
        )
    }

    openWindow() {
        this.setState({
            show: true
        })
    }

    closeWindow() {
        this.setState({
            show: false
        })
    }
}
React.render(<ConfirmTip/>, document.getElementById('tip-demo'));

API

Window

name	type	default	description
visible	Boolean	false	whether show window
position	Object	{align: 'cc', offset: [0, 0]}	Align option values: tr, tc, tl, cl, cc, cr, bl, bc, br.
size	Object		width, height
closable	Boolean	true
maximizable	Boolean	false
backdrop	Boolean	true
keyboard	Boolean	true
animation	Boolean/ReactComponent
onAlign	function
onShown	function
onHide	function
onHidden	function

Modal

name	type	default	description
visible	Boolean	false	whether show modal
size	String	md	fl: full screen, lg, md, sm
header	ReactElement
footer	ReactElement
onHide	function

Confirm

name	type	default	description
visible	Boolean	false	whether show confirm
title	String
onCancel	function
onOk	function

Tip

name	type	default	description
visible	Boolean	false	whether show Tip
type	String	info	info, success, warning, danger
title	String
onOk	function

License

react-bootstrap-window is released under the MIT license.