Using Bootstrap Modal with ReactJS

Using Bootstrap Modal with ReactJS

Here we will be creating a reusable React-component for Bootstrap Modal.

Setup

Let’s first create a skeleton for our component. Create a file bootstrap-modal.jsx which contains the following code:

var BootstrapModal = React.createClass({
    displayName: "BootstrapModal",
    render: function () {
        return (
            <div ref="modal" className="modal fade">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button"
                                className="close">
                                <span>&times;</span>
                            </button>
                            <h4 className="modal-title">Title</h4>
                        </div>
                        <div className="modal-body">
                            Modal Body
                        </div>
                        <div className="modal-footer">
                            <button type="button"
                                className="btn btn-success">
                                OK
                            </button>
                            <button type="button"
                                className="btn btn-danger">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

Including Bootstrap Plugin

Now we must initiate the modal plugin when the component loads and destroy it when it unloads. Add the following code to file created in the previous step.

componentDidMount: function () {
    $(this.refs.modal.getDOMNode()).modal({
        backdrop: "static",
        show: false
    });
},
componentDidUnmount: function () {
    $(this.refs.modal.getDOMNode()).off();
}

Helpers

Now, let us write helpers for showing and hiding the modal. Add the following code to the file.

show: function () {
    $(this.refs.modal.getDOMNode()).modal("show");
},
hide: function () {
    $(this.refs.modal.getDOMNode()).modal("hide");
}

Final code

The final code must look something like this:

var BootstrapModal = React.createClass({
    displayName: "BootstrapModal",
    componentDidMount: function () {
        $(this.refs.modal.getDOMNode()).modal({
            backdrop: "static",
            show: false
        });
    },
    componentDidUnmount: function () {
        $(this.refs.modal.getDOMNode()).off();
    },
    render: function () {
        return (
            <div ref="modal" className="modal fade">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button"
                                className="close">
                                <span>&times;</span>
                            </button>
                            <h4 className="modal-title">Title</h4>
                        </div>
                        <div className="modal-body">
                            Modal Body
                        </div>
                        <div className="modal-footer">
                            <button type="button"
                                className="btn btn-success">
                                OK
                            </button>
                            <button type="button"
                                className="btn btn-danger">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        );
    },
    show: function () {
        $(this.refs.modal.getDOMNode()).modal("show");
    },
    hide: function () {
        $(this.refs.modal.getDOMNode()).modal("hide");
    }
});

Usage

The modal component created above can be used by creating a file app.jsx with the following code:

var App = React.createClass({
    showModal: function() {
        this.refs.modal.show()
    },
    render: function() {
        <div>
            <button type="button" className="btn btn-primary" onClick={this.showModal}>Show Modal</button>
            <BootstrapModal ref="modal"/>
        </div>
    }
});

React.render(<App />, document.getElementsByTagName('body')[0]);

As you can see, we have created a simple button when clicked will show the modal.

Test Drive

Create a index.html with the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Modal with ReactJS</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="http://fb.me/react-0.12.2.min.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>

    <script type="text/jsx" src="path/to/bootstrap-modal.jsx"></script>
    <script type="text/jsx" src="path/to/app.jsx"></script>
</body>
</html>

When you open the file in browser (preferably via a server) and click on the button, you must see a modal.

Best Open Source Business Intelligence Software Helical Insight is Here

A Business Intelligence Framework

Free
Download