Render props

[techniq]

Creating a list of existing HOC components we should updated to have least have a render prop equivalent (feel free to add to the list)

• <ScreenSize>
  • Convert withScreenSize similar to what we did with ParentSize
• <BoundingRects>
  • Convert withBoundingRects
• <Tooltip>
  • Convert withTooltip, Tooltip, and TooltipWithBounds
  • Need to think how best these should compose together. We might not need all three and just use composition of the components

[hshoff]

thanks @techniq!

[williaster]

We could possibly remove TooltipWithBounds if we converted withBoundingRects -> BoundingRects because things could be more composable:

const top = ...;
const left = ...;

<BoundingRects>
  {({ rect, parentRect }) => (
    <Tooltip 
        style={{ 
          top: rect && parentRect && rect.right > parentRect.right ? (left - rect.width) : left, 
          left: rect && parentRect && rect.bottom > parentRect.bottom ? (top - rect.height) : top, 
          ...rest 
     }}>
  )}
</BoundingRects>

though this still requires the user to do the right rect comparison, which isn't hard but is basically boilerplate.

[techniq]

@williaster could BoundingRects expose some helpers passed down as well, such as

const top = ...;
const left = ...;

<BoundingRects>
  {({ rect, parentRect, getTop, getLeft }) => (
    <Tooltip 
        style={{ 
          top: getTop(left), 
          left: getLeft(top), 
          ...rest 
     }}>
  )}
</BoundingRects>

[techniq]

Would be useful if all our shapes supported render props as well, similar to how area now does.

This will be useful to better support react-spring (to allow using animated.rect instead of just rect, etc)