Render props pattern usage

[chrisdrackett]

Have you ever considered having sizeMe work where you use a <SizeMe> component and it passes the size down as a prop? I think this method feels a bit more readable. ReactMotion does something like this.

<SizeMe monitorHeight>
    {size => <div>{size.width}, {size.height}</div>}
</SizeMe>

[ctrlplusb]

It's an interesting concept. Although we would have to make the SizeMe component render out a div or something similar, which would then be measured and then it's size would be passed down into the render callback function.

Additional props could be applied to the div (outside of the expected SizeMe config props) - such as className/style etc, and we could even support a tag prop so you can change the container type (e.g. div/span etc).

This could be just a special component that encapsulates the existing API. Are you happy to experiment in creating this wrapper component? And then we could look at incorporating it if we found it useful.

[chrisdrackett]

could SizeMe just clone and return its child and make sure that only a single child is ever sent?

[ctrlplusb]

Yeah, that sounds like an option. 😀

I would love for us to explore this more. Are you up for starting up a PR?

[chrisdrackett]

I am!

[ctrlplusb]

Awesome! Shout if you need anything. 😊

[chrisdrackett]

actually I might have spoken too soon, I'm going to take a look at https://github.com/souporserious/react-measure first, as it seems to support this format already and we have other components that also use it already.

Not that I'm against helping out, it just might not be right away 😊

[ctrlplusb]

Started to flesh out an API: https://codesandbox.io/s/oxkw6xv4z6

[ctrlplusb]

Published a new version including a render props pattern based component 🎉