Use refs to replace ReactDOM.findDOMNode

[donperi]

Resolves #141

Using callback refs format will give the package the most backward compatible change.
The new React.createRef is available from 16.3.

I added a breaking change.
From this on, callback children will hace the sensorRef that should be pass as ref prop to the root level element.

[ValGeorgiev]

Hi @joshwnj could you have a look into this PR, please. It will be nice to not have this warning, when we are using the latest react versions. Thanks

[joshwnj]

Thanks @donperi ! Just got back from vacation so I'm eager to get this merged now :)

This looks good, my only hesitation is that I tried updating this demo to the new version and it no longer worked: https://codesandbox.io/s/p73kyx9zpm

Not sure yet why, so if you have any ideas please let me know.

[joshwnj]

Ok, I think I see why it's not working. In the old version we have a ref of the VisibilitySensor component itself. But with this change we are passing the callback ref to the children.

To get the demo above working, I need to also set the ref prop, so this means there will be an upgrade step required for anyone who gets the new version:

function MyComponent (props) {
  return (
    <VisibilitySensor>
-      {({isVisible}) =>
-        <div>I am {isVisible ? 'visible' : 'invisible'}</div>
+      {({ sensorRef, isVisible }) =>
+        <div ref={sensorRef}>I am {isVisible ? 'visible' : 'invisible'}</div>
      }
    </VisibilitySensor>

I wonder if there's a way that doesn't require an upgrade step for user code?

Or at very least we'll need a way to clearly inform anyone with the new version that hasn't added the ref prop.

[realdennis]

@joshwnj

Not really sure whether it would work, but could we just fallback to the React.findDOMNode for the original usage to fix the issue you mentioned? Even somehow developers do not forward the sensorRef to child, it should also work as expected.

And update the document of two usage, so that developers could choose using ref in new version React (maybe concurrent mode?) or just let our sensor auto get the node by findDOMNode?

[realdennis]

this.node = this.sensorNode || ReactDOM.findDOMNode(this);

[realdennis]

this.node = this.sensorNode || ReactDOM.findDOMNode(this);

[realdennis]

Suggested change

	this.node = nodeRef;
	this.sensorNode = nodeRef;