Question regarding environments missing ResizeObserver

I have a library where I don’t necessarily want to polyfill ResizeObserver if a device is missing support, meaning I’d like to avoid calling useResizeObserver when ResizeObserver does not exist in DOM.

Due to React semantics, I can’t make the call to the hook conditional.

Would it be reasonable to extend the hook with an option to disable resize detection when it isn’t supported (e.g. by blocking calls to new ResizeObserver internally)?

I know that I can add the hook to a conditionally rendered element in order to prevent it from running if ResizeObserver isn’t in DOM, e.g.:

  { ("ResizeObserver" in window) && <SomeComponentWithResizeObserver callback={setSomeStateOnResize} /> }

However, if my library only exports a hook and no component, that wouldn’t be possible.

I can create a PR if this sounds reasonable.

[martinstark]

I just used delete in order to quickly test what happens in an environment where ResizeObserver is missing and calling it would throw an error. Setting ref to null prevents calls to ResizeObserver. That delete is not part of my actual code 😬

Real code example would be something like:

  useResizeObserver({
    // prevent crashing in environments that do not support ResizeObserver
    ref: isRoAvailable ? someRef : null,
    onResize: () => {
      // ...
    },
  })

[ZeeCoder]

Great, I’ll leave this issue open until it’s documented, I think it’s an interesting use-case. @martinstark can you just also confirm when you did the implementation if there were anything else that needed to be considered, or if it was just copy-c of the above code? Just so I’d know what to document.