Skip to content

Commit 0809958

Browse files
Pomaskin Ilyadiasbruno
Pomaskin Ilya
authored andcommitted
[added] ref for overlay and content
1 parent 61b141d commit 0809958

File tree

5 files changed

+47
-2
lines changed

5 files changed

+47
-2
lines changed

Diff for: README.md

+15
Original file line numberDiff line numberDiff 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

207222
Inside an app:

Diff for: docs/README.md

+8
Original file line numberDiff line numberDiff 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

Diff for: specs/Modal.spec.js

+16
Original file line numberDiff line numberDiff 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
};

Diff for: src/components/Modal.js

+3-1
Original file line numberDiff line numberDiff 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

Diff for: src/components/ModalPortal.js

+5-1
Original file line numberDiff line numberDiff 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() {

0 commit comments

Comments
 (0)