Support React.RefObject in React >=16.3

[joaovieira]

Handle children ref created using the new React.createRef. This is an object containing a current property pointing to the HTML element. E.g.

import Observer from '@researchgate/react-intersection-observer';

class MyComponent extends React.Component {
  targetRef = React.createRef();

  handleClick = () => {
    console.log(this.targetRef.current); // HTMLDivElement
  }

  render () {
    return <Observer>
        <div ref={this.targetRef} onClick={this.handleClick}>Foobar</div>
    </Observer>
  }
}

I've raised this with the React team before. See: facebook/react#13029.

We need to extend here to support this new format.

Expected behavior

☝️ this.targetRef.current should be defined and should match HTMLDivElement.

Current behavior

☝️ this.targetRef.current is null.

Context (environment)

React >= 16.3. See facebook/react#13029.

[Rendez]

Alright, so the main issue I see here – whatever the intent we have – is that if we manage make that TS prop non-readonly, we can't re-assign props.children.ref.current, because props are frozen (or should be treated as such).

Correct me if I'm wrong but seems like the only future-proof solution would be to have a new prop that you could optionally provide.

<Observer innerRef={reactRef} onChange={...}>
  <div> {/* <-- gets innerRef assigned if provided */}
     {...}

[Rendez]

Pardon me for not mentioning the obvious approach to innerRef 🙊. We would rather use React.forwardRef 💯

[joaovieira]

@Rendez no, it should be ok. The less pervasive solution is to simply assign to ref.current if it's an object - like in here - as it's their recommended approach (also what they do under the scenes with the ref). Given the source of this module is not TS, there shouldn't be any difference or problem with the types.

Now, tapping on the children passed in the component may be seen as a bad practice (as you mentioned). I've seen other patterns for doing this exact same thing (get hold of a DOM node for measuring, etc.) - such as react-measure. Though, that's a much bigger breaking change.