title: Trigger modal shown for React Bootstrap
body: <p><a href="http://react-bootstrap.github.io/components.html#modals" rel="nofollow">http://react-bootstrap.github.io/components.html#modals</a> - I am looking for a way to find the trigger event for 'shown.bs.modal' and not 'show.bs.modal'.</p>
  
  <p>I don't see any documentation on some of the bootstrap modal events: <a href="http://getbootstrap.com/javascript/#modals-events" rel="nofollow">http://getbootstrap.com/javascript/#modals-events</a></p>
  
  <pre><code>var NewPerson = React.createClass({
  
    getInitialState: function(){
      return { showModal: false };
    },
  
    componentDidMount: function() {
      // removed irrelevant code
    },
  
    close: function(){
      this.setState({ showModal: false });
    },
  
    open: function(){
      this.setState({ showModal: true });
    },
  
    submit: function(e) {
      // removed irrelevant code
    },
    render: function() {
      var Button = ReactBootstrap.Button;
      var ButtonInput = ReactBootstrap.ButtonInput;
      var Modal = ReactBootstrap.Modal;
  
      return (
        &lt;div&gt;
          &lt;Button
            className="pull-right bottom-20"
            bsStyle='success'
            bsSize='large'
            onClick={this.open}
          &gt;
            Create New Person
          &lt;/Button&gt;
  
          &lt;Modal id="new-person-modal" show={this.state.showModal} onHide={this.close}&gt;
            &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title&gt;Create a New Person!&lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body&gt;
              &lt;form id="new-person-form" onSubmit={this.submit} accept-charset="UTF-8" method="POST" novalidate="novalidate"&gt;
                &lt;div className="row"&gt;
                  &lt;div className="form-group col-md-12"&gt;
                    &lt;input type="text" className="form-control" id="author" name="author" ref="author" placeholder="Author (First + Last)" required /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;ButtonInput
                  type="submit"
                  value="Submit"
                  bsStyle="success"
                  bsSize="large"
                  onSubmit={this.submit}
                  disabled={this.state.disabled} /&gt;
              &lt;/form&gt;
            &lt;/Modal.Body&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      );
    }
  });
  
  React.render(&lt;NewPerson url="/person" /&gt;, document.getElementById('person-new'));
  </code></pre>
  
  <p>I even tried to hack it by just doing it in jQuery off to the side, which also isn't working.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    $('#new-person-modal').on('shown.bs.modal', function (e) {
      console.log('modal displayed');
      // now can execute dynamic JS
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any idea how to trigger the 'on shown' event?  I can't find anything in the react-bootstrap source either.</p>