bootstarted/react-resize-observer

Component for giving you `onResize`.

react-resize-observer

Component for giving you onResize.

Overview

Primarily based on this work by Marc J. Schmidt.

Usage

npm install --save react react-dom react-resize-observer

Add ResizeObserver to the element whose size or position you want to measure. The only requirement is that your component must not have a position of static (see Caveats section.

import ResizeObserver from 'react-resize-observer';

const MyComponent = () => (
  <div style={{position: 'relative'}}>
    Hello World
    <ResizeObserver
      onResize={(rect) => {
        console.log('Resized. New bounds:', rect.width, 'x', rect.height);
      }}
      onPosition={(rect) => {
        console.log('Moved. New position:', rect.left, 'x', rect.top);
      }}
    />
  </div>
);

Component Props

onResize: function

optional

Called with a single DOMRect argument when a size change is detected.

onPosition: function

optional

Called with a single DOMRect argument when a position change is detected.

onReflow: function

optional

Called with a single DOMRect argument when either a position or size change is detected.

Caveats

Target Element Style

ResizeObserver will detect changes in the size or position of the closest containing block (an element with a position other than static) - so use either fixed, absolute, or relative on the element you are measuring.

The mechanism used to detect element size changes relies on the behavior of nested, absolutely positioned elements and their ability to trigger scroll events on their parent element. This is the reason this library is implemented as a rendered child element, and not as component enhancer.

Position Detection

The onPosition (an onReflow) callbacks will detect when the measured element's position in the viewport changes, but only when the change is caused by a scroll event of the window or an ancestor element with overflow: scroll. Position changes caused by other factors (i.e. transform, margin, top/left etc.) will not be immediately detected - although these changes will be observed and returned the next time a scroll event is captured.

If absolutely you need to capture position changes caused by style updates, calling document.body.dispatchEvent(new UIEvent('scroll')) will cause any mounted ResizeObserver instances to update.

Callback Result

This component returns raw DOMRect instances as the callback argument. DOMRect instances return {} when serialized to JSON (which will cause them to appear empty in Redux DevTools). DOMRect instances may crash the React Developer Tools extension if you try to inspect them as part of component state.

If any of these quirks become an issue, the solution is to map the values you need onto a plain object: https://stackoverflow.com/questions/39417566.

react-resize-observer's Issues

Problem with rollup

Hi, I'm trying to use this module with rollup, the problem is that while compiling it trigger the error: [!] Error: 'ResizeObserver' is not exported by ....\node_modules\react-resize-observer\lib\ResizeObserver.js

Actually i've found that using the default export ResizeObserver inside node_modules/react-resize-observer/lib/ResizeObserver.js
Solve the problem, but I really don't wanto to have to do this. I've read the rollup documentation and in similar cases you must create a namedExport inside your rollup config file (ie this is necessary with some react stuff), but in this case it doesn't seems to work.

Have you any info or suggestion to have this working on rollup? Thanks

Trying to create "breakpoint" classes on the parentNode

I'm trying to implement breakpoints like this article:
https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/#observing-container-resizes

Essentially I want the parentNode object to have classes like .SM .MD .LG depending on how big they are. The problem is accessing either the parentNode or embedding content in the children of the . Neither are easy.

The resize and reflow, only return the rect, which is great, but they could easily return the parentNode as well. This would make it much more useful in this usecase. If you embed content as children like <ResizeObserver>{children}</ResizeObserver> then the content isn't passed through.

In the version I'm running locally, I just extend the reflow, resize, position to also return the parentNode. would you guys be open to me creating a PR to extend it to return parentNode as well?

Use of <div> fails validateDOMNesting check in certain elements

Apologies if someone has brought this up before. I'm using react-resize-observer in a way where I need it to live inside elements like <p> and <span> sometimes.

But React complains about this since it's against the HTML spec:

index.js:2178 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

It seems like the same functionality could be done with span as long as it's set to display: block. AFAIK spans are valid everywhere. Would it be worthwhile to switch?