Feat/use measures

[KMNowak]

[中文版模板 / Chinese template]

🤔 This is a ...

• [x] New feature
• [ ] Bug fix
• [ ] Site / documentation update
• [ ] Demo update
• [ ] TypeScript definition update
• [ ] Bundle size optimization
• [ ] Performance optimization
• [ ] Enhancement feature
• [ ] Internationalization
• [ ] Refactoring
• [ ] Code style optimization
• [ ] Test Case
• [ ] Branch merge
• [ ] Other (about what?)

🔗 Related issue link

💡 Background and solution

The useMeasures hook allows to receive the actual measures and positioning of given element. Thanks to that we can track changes and perform actions e.g. when the element is resized to a given size or moved to a specific relative or absolute place.

📝 Changelog

• create useMeasures hook to receive current measurements of a given element
• add test helper function mockRaf to reuse it across the test suites

Language	Changelog
🇺🇸 English	add useMeasures hook
🇨🇳 Chinese	增加useMeasures hook

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• [x] Doc is updated/provided or not needed
• [x] Demo is updated/provided or not needed
• [x] TypeScript definition is updated/provided or not needed
• [x] Changelog is provided or not needed

[CLAassistant]

All committers have signed the CLA.

[crazylxr]

This hook is similar to useSize. Would you consider extending useSize?

[KMNowak]

This hook is similar to useSize. Would you consider extending useSize?

Thank you for mentioning that. Actually I was thinking about extending useSize hook. However the useMeasures hook relates to a different set of attributes and in my humble opinion will be used in different cases than useSize. Please notice, that useSize uses observer.entry.target but the useMeasures uses contentRect and as a result returns all relative values like top, x etc. It's more based on element usage than useSize which return value is useful, but much more general.

Finally I believe, that keeping them separated gives more clarity and better separation of concerns. However if you disagree I can easily merge the proposed functionality info useSize.

[crazylxr]

This hook is similar to useSize. Would you consider extending useSize?

Thank you for mentioning that. Actually I was thinking about extending useSize hook. However the useMeasures hook relates to a different set of attributes and in my humble opinion will be used in different cases than useSize. Please notice, that useSize uses observer.entry.target but the useMeasures uses contentRect and as a result returns all relative values like top, x etc. It's more based on element usage than useSize which return value is useful, but much more general.

Finally I believe, that keeping them separated gives more clarity and better separation of concerns. However if you disagree I can easily merge the proposed functionality info useSize.

It would be more appropriate to mention an RFC, discuss the API, and then rework it.

[KMNowak]

@crazylxr thank you for mentioning that. I've opened an issue with RFC and reference to this PR. I'm looking forward to community's feedback.

[liuyib]

repeat: https://github.com/alibaba/hooks/pull/2063

[KMNowak]

Since https://github.com/alibaba/hooks/pull/2063 is covering the same functionality, we can close it.