digidem / react-dimensions

[Looking for maintainers]

Home Page:http://lab.digital-democracy.org/react-dimensions/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is the wrapper <div> necessary?

mindjuice opened this issue · comments

I've just started using react-dimensions and ran into a problem when using it in a flexbox layout. The wrapped <div> was taking more space than I expected.

I was a bit surprised that react-dimensions wrapped my <div> with a <div> of its own that had an inline style set to ``width:100%; height:100%`.

On first glance, it feels wrong for react-dimensions to affect the layout.

Could we do something like reach up into DOM and get the actual parent instead?

ReactDOM.findDOMNode(this).parentNode

What do you think? Is there some reason that we couldn't get rid of the extra <div>?

This SO answer seems relevant: http://stackoverflow.com/a/32855967/332048

Thinking about this some more, with flexbox, reaching up to the parent would obviously not work, since the parent's job is to redistribute the children across the space.

I've been through a similar thought process @mindjuice. I think we need the wrapper div that we can style to fill the space as needed, and it's the dimensions of this wrapper div that are passed as props to the wrapped component. Just pushing a new version that allows for the style of the div to be overridden, so that it works with flexbox layouts etc.

you can now override the style of the wrapper <div>, so you can customize layout e.g. with flexbox.