Comments (9)
Seems like the TS types will need to change from using HTMLElement
to simply Element
, as ResizeObserver
itself can observe any Element
.
from use-resize-observer.
🎉 This issue has been resolved in version 9.0.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
from use-resize-observer.
Thank you very much!
from use-resize-observer.
I checked working with SVG. Does not work. The height variable is always zero.
from use-resize-observer.
I checked working with SVG. Does not work. The height variable is always zero.
Could you please provide reproduction in codesandbox?
it would be even better if you could check using raw ResizeObserver first, as it's known to be a bit quirky with svgs.
from use-resize-observer.
https://codesandbox.io/s/use-resize-observer-hsxycd?file=/src/App.tsx
It is required to display a square in the middle of the browser. But instead of the browser dimensions, the dimensions of the square are substituted in height, width.
from use-resize-observer.
Here's a slightly modified version of that sandbox:
https://codesandbox.io/s/use-resize-observer-forked-29q3fg?file=/src/App.tsx
As you can see the hook reports the same exact values that a raw ResizeObserver reports, so I see no issues with the hook based on this example.
from use-resize-observer.
Why doesn't it return the dimensions of the SVG container?
from use-resize-observer.
Not 100% sure, the ResizeObserver spec around SVGs is a bit weird.
Here's some stuff I found, hope it helps:
- streamich/react-use#1745
- juggle/resize-observer#72
- WICG/resize-observer#9
- w3c/csswg-drafts#4032
- w3c/svgwg#713
Also I wonder if you could just wrap your SVG in a div and measure that instead?
Might help you depending on your exact use-case.
from use-resize-observer.
Related Issues (20)
- Externalise useResolvedElement HOT 11
- Are the terms `blockSize` and `inlineSize` in the docs backwards? HOT 1
- Support for <img/> elements using `object-fit` HOT 5
- Future enhancement to return element coordinates
- Simply doesnt seem to want to work with a simple component. Crashes even in the simplest usage.
- SSR HTMLDivElement is not defined in 7.0.0 HOT 2
- Refs not being released on component dismounts leading to memory leaks HOT 7
- useResizeDetector resize method is not triggering in v7.0.1 HOT 7
- Using the same ResizeObserver instance for all hooks for better performance HOT 1
- Safari 15 has ResizeObserver API but it still does not work HOT 14
- ResizeObserverSize is not defined in typescript build
- onResize is not called on mount HOT 3
- Why is it suggested to instal as a dev dependency HOT 2
- No values reported when using React StrictMode HOT 5
- Basic usage is not working HOT 3
- Is there any reason we should save this as a dev dependency instead of a runtime dep? HOT 1
- Support getBoundingClientRect() HOT 9
- Question regarding environments missing ResizeObserver HOT 6
- export TS types HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from use-resize-observer.