Comments (3)
Any solution? @lewisl9029 @drcmda
from react-use-measure.
+1, we've also hit the limitation where the measured element's bounds don't update when some type of page flow change affects its position. See here https://codesandbox.io/s/frosty-rain-l90dn?file=/src/index.tsx
@drcmda have you thought about this challenge much? Would be amazing to be able to detect when an element's position changes, doing this with IntersectionObserver
seems tricky but might be possible.
from react-use-measure.
Hey, this is a late response. Ran into the same limitation as @lewisl9029 and @williaster did. Was able to get the x position to update correctly by adding a React.createRef
to the element and then used ref.current.getBoundingClientRect().x
to get the correctly updating position when the sibling size changes.
Looking at the internal code of this lib, not sure why this is a bug, maybe because the call to getBoundingClientRect
is memoized.
from react-use-measure.
Related Issues (20)
- Does not work on Safari: Polyfill not injecting? HOT 1
- Incorrect measurements after Next.js soft navigation on mobile
- [BUG] not works with React.forwardRef
- Get left element position after react-spring animation HOT 1
- snowpack failed to compile HOT 2
- Dependencies are needed HOT 5
- TS Errors When Setting Options
- Shouldn't this be `resizeChange` as opposed to `scrollChange`?
- Don't paint before measurements are taken HOT 1
- Reduce lag between useMeasure and useSpring? HOT 1
- Doesn't measure position updates when size doesn't change HOT 1
- Does not work on Internet Explorer 11 HOT 2
- The width doesn't change properly with flexbox + svgs
- New reference of ref everytime useMeasure is called.
- Get position with default scroll values
- Use custom debounce method
- debounce should not affect first measure
- bug: react 18 out of sync state updates HOT 1
- Feature request: optionally apply CSS transforms.
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 react-use-measure.