search

maslianok / react-resize-detector

A Cross-Browser, Event-based, Element Resize Detection for React
http://maslianok.github.io/react-resize-detector/
MIT License
1.25k stars 91 forks source link

Will be good to add ability to pass ResizeObserver options #127

Closed whiteand closed 3 years ago

whiteand commented 3 years ago

Look at: Resize Observer Options

Will be good to be able to define which size change we want to detect

maslianok commented 3 years ago

I didn't even know ResizeObserver has additional parameters.

I don't think it's supported by any browser or polyfill, isn't it?

whiteand commented 3 years ago

@maslianok https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe

maslianok commented 3 years ago

Agree, good idea! Thanks for the suggestion 👍

I think it may be an additional property. Something like

observerBoxModel: 'content-box' | 'border-box' | 'device-pixel-content-box'

// and later on

const resizeObserver = new window.ResizeObserver(resizeHandler.current, { box: observerBoxModel });

Can you make a PR with these changes?

whiteand commented 3 years ago

If no one will make it before me, I can try to do it tomorrow @maslianok

maslianok commented 3 years ago

Thank you @whiteand

I'm going to publish a new version tomorrow

maslianok commented 3 years ago

Published in v6.5.0

Thanks again for your efforts

whiteand commented 3 years ago

@maslianok readme.md contains observeOptions instead of observerOptions

maslianok commented 3 years ago

@whiteand thanks, updated...

Sorry, I forgot to mention that I changed the prop name a bit.
I hope you're fine with the new name :)

alienzhangyw commented 3 years ago

This option is not working as expected, I still get content-box size with option 'box' been set to 'border-box'. I'm using react-resize-detector/build/withPolyfill.

maslianok commented 3 years ago

We're using the pattern described here https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe

resizeObserver.observe(divElem, { box : 'border-box' });

Nothing fancy or error-prone (source code)

The usage might look like

withResizeDetector(CustomComponent, { observerOptions: { box : 'border-box' } });

Let me know if this doesn't work for you