Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[useMeasure] ResizeObserverOptions added as prop #2619

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

williamisnotdefined
Copy link

@williamisnotdefined williamisnotdefined commented Jan 24, 2025

[useMeasure] ResizeObserverOptions added as prop

Now useMeasure accepts an observerOptions as parameter, plus the hook will also return the element ref in its last argument, just in case of some need.

This PR try to solve the issue 2501.
It is a really small change that shouldn't affect the current hook behavior if a parameter is not provided.
Almost sure I forgot something in the PR flow, please, just let me know.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as before)

Checklist

  • Read the Contributing Guide
  • Perform a code self-review
  • Comment the code, particularly in hard-to-understand areas
  • Add documentation
  • Add hook's story at Storybook
  • Cover changes with tests
  • Ensure the test suite passes (yarn test)
  • Provide 100% tests coverage
  • Make sure code lints (yarn lint). Fix it with yarn lint:fix in case of failure.
  • Make sure types are fine (yarn lint:types).

@williamisnotdefined
Copy link
Author

williamisnotdefined commented Jan 24, 2025

yarn lint:types returns the error:

Cannot find name 'ResizeObserverOptions'

The resize-observer-polyfill does not support the options parameter in observer function:

declare global {
    interface ResizeObserverCallback {
        (entries: ResizeObserverEntry[], observer: ResizeObserver): void
    }

    interface ResizeObserverEntry {
        readonly target: Element;
        readonly contentRect: DOMRectReadOnly;
    }

    interface ResizeObserver {
        observe(target: Element): void; /* Here we should have the second parameter `options` */
        unobserve(target: Element): void;
        disconnect(): void;
    }
}

I think ResizeObserver is widely supported nowadays, source: CanIUse

image

Should we still rely upon the polyfill?
I have added a ts-ignore comment and it is explained in useMeasure documentation that we should check in CanIUse the compatibility of ResizeObserverOptions in the user supported browsers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant