Trigger modal shown for React Bootstrap

Question

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

Answer 1

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.

Answer 2

I also had this same issue and this is what I tried...

Class Modal extends React.Component {

        showModal(){
        let obj = this.refs.modal;
        //write the required code here
      }
render() {
    return (
      <div>
        <div className="standard-content">
              <p><a className="btn" onClick={this.showModal}  data-toggle="modal" data-target="#exampleModal">Modal popup</a></p>
        </div>
        <div ref="modal" className="modal" id="exampleModal" role="dialog" >
            <div className="modal-dialog">
              <div className="modal-content">
                <div className="modal-header">      
                    <h4 className="modal-title">Header area</h4> 
              </div>
              <div className="modal-body">
                   body goes here..               
              </div>
              </div>
            </div>
          </div>
      </div>

    );
  }
}

As I am using ES6 so I went with the class approach. I created a container div for modal contents and gave a ref attribute for reference. Then on click of tag I attached a handler which will trigger when the modal shows up. With the help of this.refs you can access the modal. Hope it helps you.

Answer 3

The simplest way is to create a non-visual component that will call a passed function on rendering and render this component somewhere inside Modal.Body:

render: function() {
    //...
    <Modal.Body>
      //...
      <Notifier onShown={this.onModalShown} />
      //...
    </Modal.Body>
    //...
}

UPDATE: This is how the Notifier component could be implemented:

var Notifier = React.createClass({
    componentDidMount: function(){
        this.props.onShown();
    },
    render: function() {
        return null;
    }
});