Geek Answers Handbook

Resize trigger on component?

I am writing a component decorator capable of detecting when the size of a DOM element changes (css, javascript, window resizing, etc.).

This already works fine, now I'm trying to make its API easy to use, so what's easier than that?

class Foobar extends React.Component {
  render() {
    return <div onResize={() => console.log('resized!')}>Foobar</div>;
  }
}
ReactDOM.render(resizeAware(Foobar), app);

The problem I am facing is that the event onResizedoes not fire when I fire it ...

These are two attempts to trigger an event:

// method 1
onResize() {
  const resizeEvent = document.createEvent('HTMLEvents');
  resizeEvent.initEvent('resize', true, true);
  console.log('triggering resize...');
  findDOMNode(this.componentNode).dispatchEvent(resizeEvent);
}

// method 2
onResize() {
    console.log('triggering resize...');
    findDOMNode(this.componentNode).dispatchEvent(new Event('resize'));
}

If I listen to the event with:

findDOMNode(this).addEventListener('resize', () => console.log('resized'));

Everything is working. So it looks like the event I'm sending is received by the real DOM element, not the virtual DOM.

The question is, why is the call onResizenot called?
If there is no solution, how would you make your decorator API?

NB: , React onResize

+4
1

NPM lib div.

-2

More articles:


All Articles