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>

v4.0.4

fix: HOC not importing React Component (@SagivCohen)

v4.0.0

The module has been rewritten to be more structured and performant!

BREAKING CHANGES

1. resizableElementId renamed to querySelector.

// Before
resizableElementId="elementId"

// After
querySelector="#elementId"

2. Change Callback pattern function arguments

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

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

IMPROVEMENTS

1. We don't use any side-elements for Child Function Pattern, Child Component Pattern and Render prop pattern. Previously you could find some extra div's in a DOM tree and this could break complex layouts.
2. Performance optimizations. We use requestAnimationFrame to not overload pages with onResize events. We use PureComponent to optimize RRD's children rerenders. And plenty other tiny improvements.
3. resizableElementId is replaced by querySelector. Now you can choose any DOM element using querySelector syntax!

Big thanks to @lamhieu-vk for leading and pushing forward this refactoring!

Closes #58, #59, #60