Add optional effect to useResizeObserver about use-resize-observer HOT 6 CLOSED

Nice!

from use-resize-observer.

I'm not sure I follow, seems like you're calling a reset on a ref in reaction to the measured element's changes in width?
I don't see how that's something the resize observer can be responsible for?
Seems like a very specific logic for your app.

I'd recommend just creating your own hook on top of this one to make it more convenient, if you find it becoming a regular pattern, as this lib is meant to be as low-level as possible.

from use-resize-observer.

The reset is specific, but the general case of a property called effect or onResize would be useful. That runs inside the existing effect in the hook. It would pass width and height and let you do what you will.

It would allow you to create a pattern like this:

const { ref: axisRef } = useResizeObserver({ onResize: width => cursorRef.current && cursorRef.current.setWidth(width) });

I could wrap this if I need it more than once. Although I've been inspired for how I can probably use the property directly with a bit of refactoring.

from use-resize-observer.

Ah yeah I get what you want now.
Could be done. I just need to make sure not to return width/height in the return object then, as that becomes unnecessary. 🤔

Even better, I think with a callback I can implement a better throttled / debounced solution as well, as the current recommendation triggers a render, whether or not the return values of width / height are actually used or not:
https://github.com/ZeeCoder/use-resize-observer#throttle--debounce

from use-resize-observer.

Added in v6

from use-resize-observer.

You might want to check out this demo @danni :
https://codesandbox.io/s/use-resize-observer-throttle-and-debounce-8uvsg

from use-resize-observer.