File tree 5 files changed +47
-2
lines changed
5 files changed +47
-2
lines changed 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.
202
202
}
203
203
```
204
204
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
+
205
220
## Examples
206
221
207
222
Inside an app:
Original file line number Diff line number Diff line change @@ -104,6 +104,14 @@ import ReactModal from 'react-modal';
104
104
labelledby: " heading" ,
105
105
describedby: " full_description"
106
106
}}
107
+ /*
108
+ Overlay ref callback.
109
+ */
110
+ overlayRef= {setOverlayRef}
111
+ /*
112
+ Content ref callback.
113
+ */
114
+ contentRef= {setContentRef}
107
115
/ >
108
116
```
109
117
Original file line number Diff line number Diff line change @@ -601,4 +601,20 @@ export default () => {
601
601
Modal . setAppElement ( node ) ;
602
602
ReactDOM . render ( < App /> , node ) ;
603
603
} ) ;
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
+ } ) ;
604
620
} ;
Original file line number Diff line number Diff line change @@ -59,7 +59,9 @@ export default class Modal extends Component {
59
59
aria : PropTypes . object ,
60
60
role : PropTypes . string ,
61
61
contentLabel : PropTypes . string ,
62
- shouldCloseOnEsc : PropTypes . bool
62
+ shouldCloseOnEsc : PropTypes . bool ,
63
+ overlayRef : PropTypes . func ,
64
+ contentRef : PropTypes . func
63
65
} ;
64
66
/* eslint-enable react/no-unused-prop-types */
65
67
Original file line number Diff line number Diff line change @@ -50,7 +50,9 @@ export default class ModalPortal extends Component {
50
50
contentLabel : PropTypes . string ,
51
51
aria : PropTypes . object ,
52
52
children : PropTypes . node ,
53
- shouldCloseOnEsc : PropTypes . bool
53
+ shouldCloseOnEsc : PropTypes . bool ,
54
+ overlayRef : PropTypes . func ,
55
+ contentRef : PropTypes . func
54
56
} ;
55
57
56
58
constructor ( props ) {
@@ -110,10 +112,12 @@ export default class ModalPortal extends Component {
110
112
111
113
setOverlayRef = overlay => {
112
114
this . overlay = overlay ;
115
+ this . props . overlayRef && this . props . overlayRef ( overlay ) ;
113
116
} ;
114
117
115
118
setContentRef = content => {
116
119
this . content = content ;
120
+ this . props . contentRef && this . props . contentRef ( content ) ;
117
121
} ;
118
122
119
123
beforeOpen ( ) {
You can’t perform that action at this time.
0 commit comments