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.

Sign up for GitHub

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

Jump to bottom

feat: new hook useResizeObserver #67

Merged
merged 3 commits into from
May 25, 2021
Merged

feat: new hook useResizeObserver #67

merged 3 commits into from
May 25, 2021

Conversation

xobotyi
Copy link
Contributor

@xobotyi xobotyi commented May 16, 2021 •
edited
Loading

What new hook does?

Invokes a callback whenever ResizeObserver detects a change to target's size.

Checklist

  • Have you read contribution guideline?
  • Does the code have comments in hard-to-understand areas?
  • Is there an existing issue for this PR?
  • Have the files been linted and formatted?
  • Have the docs been updated?
  • Have the tests been added to cover new hook?
  • Have you run the tests locally to confirm they pass?

@codecov
Copy link

codecov bot commented May 16, 2021 •
edited
Loading

Codecov Report

Merging #67 (584f04f) into master (9e1974b) will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff            @@
##            master       #67   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           24        25    +1     
  Lines          306       344   +38     
  Branches        60        69    +9     
=========================================
+ Hits           306       344   +38
Impacted Files Coverage Δ
src/index.ts 100.00% <100.00%> (ø)
src/useResizeObserver.ts 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9e1974b...584f04f. Read the comment docs.

@xobotyi xobotyi added the 🎂 new hook New hook added label May 18, 2021
@xobotyi xobotyi force-pushed the master branch 3 times, most recently from 8dc0d88 to 2a20eb8 Compare May 20, 2021 00:33
@xobotyi xobotyi requested a review from JoeDuncko May 24, 2021 00:44
@xobotyi xobotyi marked this pull request as ready for review May 24, 2021 00:52
@xobotyi xobotyi force-pushed the master branch 3 times, most recently from 915282c to 5369a94 Compare May 25, 2021 11:18
JoeDuncko
JoeDuncko reviewed May 25, 2021
View reviewed changes
Copy link
Contributor

@JoeDuncko JoeDuncko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Questions:

JoeDuncko
JoeDuncko approved these changes May 25, 2021
View reviewed changes
Copy link
Contributor

@JoeDuncko JoeDuncko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved after looking at useMeasure. Note my questions above.

@xobotyi
Copy link
Contributor Author

xobotyi commented May 25, 2021 •
edited
Loading

  1. First time hearing about it
  2. Loking at its code - it is super overcomplicated
  3. It uses new observers for each hook, that solution is way less performant than ours: https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
  4. It has built-in throttlers\debouncers - it is not so versatile

There is only few about it, maybe there is more - dont wanna waste the time.

  • Why is this under "Sensor"?

Where it should be? It acts like a sensor - something changes (in terms of element size or position) - it triggers.

  • Why implement this as an observer instead of as a state?

Thus it is more versatile, as for me - im using this hook instead of useMeasure for one of my projects because i dont need to rerender component on measurments reading.

@xobotyi xobotyi merged commit ccf2c26 into master May 25, 2021
@xobotyi xobotyi deleted the useResizeObserver branch May 25, 2021 21:46
github-actions bot pushed a commit that referenced this pull request May 25, 2021
@semantic-release-bot
chore(release): 1.21.0 [skip ci]
e3e8742 
# [1.21.0](v1.20.4...v1.21.0) (2021-05-25)

### Features

* new hook `useResizeObserver` ([#67](#67)) ([ccf2c26](ccf2c26))
@github-actions
Copy link
Contributor

🎉 This PR is included in version 1.21.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JoeDuncko JoeDuncko JoeDuncko approved these changes

Assignees
No one assigned
Labels
🎂 new hook New hook added released
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@xobotyi @JoeDuncko