react-waypoint
react-waypoint copied to clipboard
civiccc
Use React.Fragment to remove the limit of only having one child element
Not a bad idea, but we may lose some backwards compatibility. If there’s no way to add a fallback for the current behavior, we will want to think about when the best time to drop < 16 support is.
Fragments were added in React 16.2, and Waypoint supports versions older than that right now, so it would be breaking.
Ah, adding the Fragment itself yeah. I thought from the above that some functionality change would be breaking.
Could probably use feature detection to use React.Fragment if it is available, which should be non-breaking right?
Yeah, I was thinking the same thing @lencioni! I'll try and get a PR up for it later today
@lencioni running into a small snag: React.Fragment can't take a ref prop, which Waypoint needs the child to have to do a bunch of stuff. Any thoughts on how to get around that?
Thanks for diving in to this @MatthewHerbst!
We already have a workaround for composite children (the innerRef prop). Instead of attaching the ref to the React.Fragment wrapper, how about we attach it to the first child?
Going back to the original feature request, what's the use-case for using multiple children? It's unclear to me what the expected behavior should be. I understand the desire to minimize the number of DOM nodes on a page, but I doubt that waypoint instances add much. If you have that many waypoints then you will probably have other, more serious, issues than DOM node explosion.
If we aren't concerned about DOM nodes, why not just wrap the child(ren) in a div and be done with it? Then we could support single or multiple children and it would be mostly backwards compatible.
I can't say I understand enough about how innerRef works to know if that would be ok, though I'll give it a shot locally and see.
The main reason we don’t wrap things in a div is that we don’t want to interfere with styling too much. Let’s say you have a flexbox container with multiple waypoint children. In order to get styling right, we’d have to transfer/duplicate a bunch of styles from the child to the div.
We could conditionally wrap things in a div if the number of children is greater than 0.