Trigger modal shown for React Bootstrap

react-bootstrap, reactjs

Solution

There is a proper way to do this: use the onEntered event.

<Modal
  onEntered  = { function(){ console.log( "Modal is Shown" ) }}
>

This event is called when the transition which shows the modal is finished.

There are 6 transition triggers in total:

<Modal
  onExit     = { function(){ console.log( "onExit    " ) }}
  onExiting  = { function(){ console.log( "onExiting " ) }}
  onExited   = { function(){ console.log( "onExited  " ) }}

  onEnter    = { function(){ console.log( "onEnter   " ) }}
  onEntering = { function(){ console.log( "onEntering" ) }}
  onEntered  = { function(){ console.log( "onEntered " ) }}
>

Here's what they do:

onEnter     = Callback fired before the Modal transitions in

onEntering  = Callback fired as the Modal begins to transition in    

onEntered   = Callback fired after the Modal finishes transitioning in


onExit      = Callback fired right before the Modal transitions out

onExiting   = Callback fired as the Modal begins to transition out

onExited    = Callback fired after the Modal finishes transitioning out

At the time of writing, this solution is not documented. I'm submitting a pull request so hopefully they'll update the docs soon.

Problem

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

Original source