[added] trigger onAfterOpen callback when available.

Author: diasbruno

README.md

@@ -7,7 +7,8 @@ Accessible modal dialog component for React.JS
 ```xml
 <Modal
   isOpen={bool}
-  onRequestClose={fn}
+  onAfterOpen={afterOpenFn}
+  onRequestClose={requestOpenFn}
   closeTimeoutMS={n}
   style={customStyle}>
 
@@ -95,6 +96,11 @@ var App = React.createClass({
     this.setState({modalIsOpen: true});
   },
 
+  afterOpenModal: function() {
+    // references are now sync'd and can be accessed.
+    this.refs.subtitle.style.color = '#f00';
+  },
+
   closeModal: function() {
     this.setState({modalIsOpen: false});
   },
@@ -105,10 +111,11 @@ var App = React.createClass({
         <button onClick={this.openModal}>Open Modal</button>
         <Modal
           isOpen={this.state.modalIsOpen}
+          onAfterOpen={this.afterOpenModal}
           onRequestClose={this.closeModal}
           style={customStyles} >
 
-          <h2>Hello</h2>
+          <h2 ref="subtitle">Hello</h2>
           <button onClick={this.closeModal}>close</button>
           <div>I am a modal</div>
           <form>
@@ -137,7 +144,8 @@ pass the 'shouldCloseOnOverlayClick' prop with 'false' value.
 ```xml
 <Modal
   isOpen={bool}
-  onRequestClose={fn}
+  onAfterOpen={afterOpenFn}
+  onRequestClose={requestCloseFn}
   closeTimeoutMS={n}
   shouldCloseOnOverlayClick={false}
   style={customStyle}>

examples/basic/app.js

@@ -60,17 +60,24 @@ var App = React.createClass({
     this.setState({foo: 'bar'});
   },
 
+  handleOnAfterOpenModal: function() {
+    // when ready, we can access the available refs.
+    this.refs.title.style.color = '#F00';
+  },
+
   render: function() {
     return (
       <div>
         <button onClick={this.openModal}>Open Modal</button>
         <button onClick={this.openModal2}>Open Modal 2</button>
         <Modal
+          ref="mymodal"
           closeTimeoutMS={150}
           isOpen={this.state.modalIsOpen}
+          onAfterOpen={this.handleOnAfterOpenModal}
           onRequestClose={this.handleModalCloseRequest}
         >
-          <h1>Hello</h1>
+          <h1 ref="title">Hello</h1>
           <button onClick={this.closeModal}>close</button>
           <div>I am a modal</div>
           <form>

lib/components/Modal.js

@@ -31,6 +31,7 @@ var Modal = React.createClass({
       overlay: React.PropTypes.object
     }),
     appElement: React.PropTypes.instanceOf(SafeHTMLElement),
+    onAfterOpen: React.PropTypes.func,
     onRequestClose: React.PropTypes.func,
     closeTimeoutMS: React.PropTypes.number,
     ariaHideApp: React.PropTypes.bool,

lib/components/ModalPortal.js

@@ -76,6 +76,7 @@ var ModalPortal = module.exports = React.createClass({
     focusManager.markForFocusLater();
     this.setState({isOpen: true}, function() {
       this.setState({afterOpen: true});
+      (this.props.isOpen && this.props.onAfterOpen) && this.props.onAfterOpen();
     }.bind(this));
   },