Skip to content

Commit f2f1140

Browse files
committed
Use refs to replace ReactDOM.findDOMNode
1 parent c7e7b73 commit f2f1140

File tree

2 files changed

+10
-4
lines changed

2 files changed

+10
-4
lines changed

Diff for: README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ You can also pass a child function, which can be convenient if you don't need to
6161
function MyComponent (props) {
6262
return (
6363
<VisibilitySensor>
64-
{({isVisible}) =>
64+
{({ sensorRef, isVisible }) =>
6565
<div>I am {isVisible ? 'visible' : 'invisible'}</div>
6666
}
6767
</VisibilitySensor>

Diff for: visibility-sensor.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@ export default class VisibilitySensor extends React.Component {
8383
}
8484

8585
componentDidMount() {
86-
this.node = ReactDOM.findDOMNode(this);
8786
if (this.props.active) {
8887
this.startWatching();
8988
}
@@ -95,7 +94,6 @@ export default class VisibilitySensor extends React.Component {
9594

9695
componentDidUpdate(prevProps) {
9796
// re-register node in componentDidUpdate if children diffs [#103]
98-
this.node = ReactDOM.findDOMNode(this);
9997

10098
if (this.props.active && !prevProps.active) {
10199
this.setState({
@@ -325,12 +323,20 @@ export default class VisibilitySensor extends React.Component {
325323
};
326324

327325
render() {
326+
const sensorRef = nodeRef => {
327+
this.node = nodeRef;
328+
};
329+
328330
if (this.props.children instanceof Function) {
329331
return this.props.children({
332+
sensorRef,
330333
isVisible: this.state.isVisible,
331334
visibilityRect: this.state.visibilityRect
332335
});
333336
}
334-
return React.Children.only(this.props.children);
337+
338+
return React.cloneElement(React.Children.only(this.props.children), {
339+
ref: sensorRef
340+
});
335341
}
336342
}

0 commit comments

Comments
 (0)