File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -202,6 +202,21 @@ You can use this to remove scrolling on the body while the modal is open.
202202}
203203```
204204
205+ ### Refs
206+
207+ You can use ref callbacks to get overlay and content DOM nodes:
208+
209+ ``` jsx
210+ < Modal
211+ ...
212+ overlayRef= {node => this .overlayRef = node}
213+ contentRef= {node => this .contentRef = node}
214+ ...
215+ >
216+ < p> Modal Content.< / p>
217+ < / Modal>
218+ ```
219+
205220## Examples
206221
207222Inside an app:
Original file line number Diff line number Diff line change @@ -104,6 +104,14 @@ import ReactModal from 'react-modal';
104104 labelledby: " heading" ,
105105 describedby: " full_description"
106106 }}
107+ /*
108+ Overlay ref callback.
109+ */
110+ overlayRef= {setOverlayRef}
111+ /*
112+ Content ref callback.
113+ */
114+ contentRef= {setContentRef}
107115/ >
108116```
109117
Original file line number Diff line number Diff line change @@ -601,4 +601,20 @@ export default () => {
601601 Modal . setAppElement ( node ) ;
602602 ReactDOM . render ( < App /> , node ) ;
603603 } ) ;
604+
605+ it ( "use overlayRef and contentRef" , ( ) => {
606+ let overlay = null ;
607+ let content = null ;
608+
609+ renderModal ( {
610+ isOpen : true ,
611+ overlayRef : node => ( overlay = node ) ,
612+ contentRef : node => ( content = node )
613+ } ) ;
614+
615+ overlay . should . be . instanceOf ( HTMLElement ) ;
616+ content . should . be . instanceOf ( HTMLElement ) ;
617+ overlay . classList . contains ( "ReactModal__Overlay" ) ;
618+ content . classList . contains ( "ReactModal__Content" ) ;
619+ } ) ;
604620} ;
Original file line number Diff line number Diff line change @@ -59,7 +59,9 @@ export default class Modal extends Component {
5959 aria : PropTypes . object ,
6060 role : PropTypes . string ,
6161 contentLabel : PropTypes . string ,
62- shouldCloseOnEsc : PropTypes . bool
62+ shouldCloseOnEsc : PropTypes . bool ,
63+ overlayRef : PropTypes . func ,
64+ contentRef : PropTypes . func
6365 } ;
6466 /* eslint-enable react/no-unused-prop-types */
6567
Original file line number Diff line number Diff line change @@ -50,7 +50,9 @@ export default class ModalPortal extends Component {
5050 contentLabel : PropTypes . string ,
5151 aria : PropTypes . object ,
5252 children : PropTypes . node ,
53- shouldCloseOnEsc : PropTypes . bool
53+ shouldCloseOnEsc : PropTypes . bool ,
54+ overlayRef : PropTypes . func ,
55+ contentRef : PropTypes . func
5456 } ;
5557
5658 constructor ( props ) {
@@ -110,10 +112,12 @@ export default class ModalPortal extends Component {
110112
111113 setOverlayRef = overlay => {
112114 this . overlay = overlay ;
115+ this . props . overlayRef && this . props . overlayRef ( overlay ) ;
113116 } ;
114117
115118 setContentRef = content => {
116119 this . content = content ;
120+ this . props . contentRef && this . props . contentRef ( content ) ;
117121 } ;
118122
119123 beforeOpen ( ) {
You can’t perform that action at this time.
0 commit comments