From d0907e6e606514133dc3769f549d34ef74b29664 Mon Sep 17 00:00:00 2001
From: Briam Santiago <bm.santiago14@gmail.com>
Date: Sat, 3 Nov 2018 04:44:14 -0400
Subject: [PATCH] Use refs to replace ReactDOM.findDOMNode

---
 README.md            |  2 +-
 visibility-sensor.js | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 8d3ec6b..cef0580 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ You can also pass a child function, which can be convenient if you don't need to
 function MyComponent (props) {
   return (
     <VisibilitySensor>
-      {({isVisible}) =>
+      {({ sensorRef, isVisible }) =>
         <div>I am {isVisible ? 'visible' : 'invisible'}</div>
       }
     </VisibilitySensor>
diff --git a/visibility-sensor.js b/visibility-sensor.js
index 067b3c4..3cf0822 100644
--- a/visibility-sensor.js
+++ b/visibility-sensor.js
@@ -83,7 +83,6 @@ export default class VisibilitySensor extends React.Component {
   }
 
   componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
     if (this.props.active) {
       this.startWatching();
     }
@@ -94,9 +93,6 @@ export default class VisibilitySensor extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    // re-register node in componentDidUpdate if children diffs [#103]
-    this.node = ReactDOM.findDOMNode(this);
-
     if (this.props.active && !prevProps.active) {
       this.setState({
         isVisible: null,
@@ -325,12 +321,20 @@ export default class VisibilitySensor extends React.Component {
   };
 
   render() {
+    const sensorRef = nodeRef => {
+      this.node = nodeRef;
+    };
+
     if (this.props.children instanceof Function) {
       return this.props.children({
+        sensorRef,
         isVisible: this.state.isVisible,
         visibilityRect: this.state.visibilityRect
       });
     }
-    return React.Children.only(this.props.children);
+
+    return React.cloneElement(React.Children.only(this.props.children), {
+      ref: sensorRef
+    });
   }
 }