v5.2.0

• remove lodash-es from the dependencies list

v5.1.1

Remove prop-types from the production build (both cjs/esm).

This resolves #85 and reduces the library size

v5.1.0

• Fix conditional rendering issue (#101)
• Upgrade libraries

v5.0.4

• Add Element polyfill for NodeJS env (#93)

v5.0.0

This version introduces a new logic to work with DOM elements.
From now on we recommend using HOC or Child Function Pattern (examples). It should cover all possible use cases.

Meanwhile, this version should be fully backward compatible with all other patterns existing in the previous versions.

This is a major update and it may affect the DOM structure. For example, in some rare cases the library may not add its own wrapper but use the elements from the child components.

Also, we added ability to pass targetRef to avoid findDOMNode method usage (more information in Readme)

Please report any issues you face up during this update.

v4.2.1

Upgrade dependency versions

v4.2.0

Update peerDependencies versions.

The minimal allowed React version changed to ^16.0.0

v4.1.1

Fixes the error "TypeError: element is null" in the next code snippet

<ReactResizeDetector>
  {false ? <Foo /> : null}
  <Bar />
</ReactResizeDetector>

v4.1.0

This version introduces a new property - targetDomEl.
targetDomEl is a DOM element to observe. By default it's a parent element in relation to the ReactResizeDetector component. But you can pass any DOM element to observe. This property is omitted when you pass querySelector prop.

Before (findDOMNode is called inside the library which may lead to React warnings in console)

  render() {
    return (
      <div>
        ...
        <ReactResizeDetector handleWidth handleHeight />
      </div>
    );
  }

After (the logic is equal to the above example except the fact that findDOMNode isn't called anymore)

  constructor() {
    this.parentRef = React.createRef();
  }
  render() {
    return (
      <div ref={this.parentRef}>
        ...
        <ReactResizeDetector handleWidth handleHeight targetDomEl={this.parentRef.current} />
      </div>
    );
  }

v4.0.5

• Fixed Callback pattern when function returns Fragment

<ReactResizeDetector>
  {({ width, height }) => (
      <>
        <div />
        <div />
      </>
   )}
</ReactResizeDetector>

• Fixed Child Component Pattern when there are more than 1 child

<ReactResizeDetector>
  <Foo />
  <Bar />
</ReactResizeDetector>