Fail with version 5.0.0

[shenenya]

I got error as follows when upgrade from 4.2.1 to 5.0.0. I used Child Function Pattern and the height returned is 0. Thanks.

[maslianok]

@eeyshen sorry for console.log. It's removed in v5.0.3

Re. height 0 - please show the code so I can reproduce the error.

[shenenya]

I use code as follows. The father element is a component of flexlayout-react. This works with v4.2.1, but failed with v5.0.0. Thanks.

<ReactResizeDetector handleWidth handleHeight>
  {({ width, height }) => <div>{`${width}x${height}`}</div>}
</ReactResizeDetector>;

[maslianok]

It's possible that 4.2.1 took the parent's width&height. This was the wrong behavior.

The current version listens to the first child changes. In the example above it will show the inner div dimensions. So please make sure they are not 0.

As you can see, the example above works fine https://codesandbox.io/s/wonderful-tdd-8dwnd

[maslianok]

To make it work please set the inner div height to 100% or move the ReactResizeDetector wrapper one level above.

For example:

Before:

<Parent>
  <ReactResizeDetector handleWidth handleHeight>
    {({ width, height }) => <div>{`${width}x${height}`}</div>}
  </ReactResizeDetector>
</Parent>

After: (in this case it will measure Parent dimensions)

<ReactResizeDetector handleWidth handleHeight>
  {({ width, height }) => <Parent><div>{`${width}x${height}`}</div></Parent>}
</ReactResizeDetector>

or (the inner div takes 100% height)

<Parent>
  <ReactResizeDetector handleWidth handleHeight>
    {({ width, height }) => <div style={{ height: '100%' }}>{`${width}x${height}`}</div>}
  </ReactResizeDetector>
</Parent>

[shenenya]

Solved. Thanks.