Support rendering under Jest Storyshots about react-resize-detector HOT 10 CLOSED

@bradleyayers Thanks for raising this issue and for creating a PR!

In this issue you're saying that in some environments (e.g. Jest Storyshots) the refs aren't accessible in the componentDidMount? Am I right?

Sorry, I'm not familiar with Jest Storyshots, but it should be possible to mock the ResizeDetector component. I don't think we can move the componentDidMount logic inside the ref callback, because ref callback executed each time component gets updated.

from react-resize-detector.

Hello,

FYI, i get the same error when using Preact version of my component with ReactResizeSensor
This seems to be related to:
preactjs/preact#477
Would it be possible to find a way not to rely on refs in componentDidMount ?
This would solve, i guess, both the Jest and Preact issues.

Thanks for your answer
Cheers

from react-resize-detector.

hi @yannick-milanetto , you can only get the element size when it is created, but there is no other way to get it!
why use componentDidMount to make sure element is mounted, then polyfill will use window api to get style and calc to size of element. All package to get size of element don't get size before component mounted, and it not support server-side render!

from react-resize-detector.

hi @lamhieu-vk
Thanks for your answer. I understand that you need to get element size on componentDidMount, the problem is not really that. It's more related to the fact that in preact there's no guarantee that component's refs are up-to-date when entering in componentDidMount as explained in the preact issue i've linked above :

Currently Preact does not defer ref callback invocation like it does componentDidMount()

This results in ReactResizeDetector breaking at the line 5 of the component logic :

_createClass(ResizeDetector, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var resizableElementId = this.props.resizableElementId;
      var resizableElement = resizableElementId ? document.getElementById(resizableElementId) : this.el.parentElement;
      this.ro.observe(resizableElement);
    }
  }

At this point, this.el is undefined, hence this.el.parentElement throws an error :
VM2637 WUuE:148 Uncaught (in promise) TypeError: Cannot read property 'parentElement' of undefined at ResizeDetector.componentDidMount (VM2394 WUuE:148)

Unfortunately i can't find a way to make it work with preact :(

from react-resize-detector.

@yannick-milanetto Thanks for the explanation. This is very helpful.

Can you provide a bit more details?

• How can we get a DOM element using Preact. Our goal is to send an element to the observer. And we need a way to get this element. As you pointed above, currently we use React refs feature.

• As you can see in the method above it's possible to get element by its id. Can you try something like this?

<div id="myId">
  {...}
  <ReactResizeDetector resizableElementId="myId" handleWidth handleHeight onResize={this.onResize} />
</div>

But the "myId" element should be mounted into the DOM tree when a componentDidMount triggers. I'm not sure that it works in this way in Preact.

from react-resize-detector.

Hi maslianok,
I tried the resizeElementId approach and indeed it does work fine with Preact.
However it breaks the React SSR :

Uncaught TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
    at ResizeDetector.componentDidMount (index.js?594b:149)

With the classic approach (w/o using resizeElementId) React SSR works fine.
I'm still investigating if something can be fixed, either in the way I render my Preact component, or in the way I use your ReactResizeDetector lib.

from react-resize-detector.

It makes no sense to render ReactResizeDetector on a server.
I would suggest you add some condition to render only in a browser

<div id="myId">
  {...}
  {!ssr && <ReactResizeDetector resizableElementId="myId" handleWidth handleHeight onResize={this.onResize} />}
</div>

and you can declare the ssr variable based on your environment. For example,

const ssr = !window;

or pass this variable from the webpack.

from react-resize-detector.

Hi maslianok,

Agreed, it totally makes sense. It works fine now.
So I can confirm that for the issue of this.el being null / undefined in a Preact context, using resizableElementId provides a working alternative.

For this same issue in a Jest storyshots context, i can't help that much as I don't use Jest storyshots.

Thx

from react-resize-detector.

I fixed at #40

from react-resize-detector.

Thanks for fixing this, @lamhieu-vk

Released in 3.1.1

from react-resize-detector.