Allow usage of ref on custom components

[clayne11]

React 16.3 introduced the concept of forwarding refs as a first-class citizen. We can remove the usage of innerRef and just use the regular ref prop. We can make this backwards compatible by using innerRef if it exists however we shouldn't throw if a custom component doesn't have innerRef - ref can work just fine.

This library currently breaks with styled-components@4 due to this issue.

[clayne11]

Looks like we can't actually make this backwards compatible. I think we should release a new major version that no longer uses innerRef.

[clayne11]

@brigade-slack I'm happy to make a PR for this if you agree.

[trotzig]

I’m in favor of the breaking change. Perhaps coupled with a note in the readme about needing to use an older version for innerRef. Thanks for helping out!

[clayne11]

@trotzig I'm also having quite a bit of frustration with the test suite. How do you feel about updating to Jest and Enzyme? The current test suite is quite crappy to use.

[trotzig]

That sounds like a good idea in general. I remember setting this up years ago when neither of those were a thing. The only thing I would worry about is that the code relies on getting proper measurements from the browser. I’m not sure jsdom will provide those unless we mock things (which might be okay).

[clayne11]

OK I'll have a look at updating the tests in a separate PR and see how it goes.

[piuccio]

Any progress on this? I'm trying to use this library with styled-components@4 but it won't work

[clayne11]

It was a pain getting the tests working and I ran out of time working on it. I forked it and fixed it at @clayne/react-waypoint but the tests are failing so I never submitted a PR.

My company Casalova is using it in production and everything works.

[trotzig]

Is #278 addressing this concern perhaps?

[Andarist]

@trotzig yeah, my PR is fixing this problem. With my PR ref prop can be used when wrapping DOM elements or elements wrapped with React.forwardRef (such as styled-components@4). Naturally for other elements you still have to use innerRef.

[twxia]

Hi @Andarist but for your change, this line of code, when styled-component pass to isDOMElement is false so it can't get inside that condition.

I need to write it as below code to let the waypoint works fine again:

const WrapperWithRef = ({ innerRef, ...props }) =>
 <Wrapper ref={innerRef} {...props} />);

[Andarist]

@twxia Which version of styled-components do you use?

[twxia]

@Andarist styled-components@latest (4.1.3) I think all of v4 can't work well in that change

[Andarist]

Somehow I've made a mistake and was calling isForwardRef with wrong argument, I've prepared a PR with a fix for this just now.