Comments (3)
I tried your second option but it registered as inView multiple times and loaded too many items.
I ended up setting the key prop and it seems to have worked. I actually didn't now that's how you force recreation, great idea!
Thanks for this package it's fantastic and allows us to do a whole bunch of really cool things super easily!
Thanks,
Dharsan
from react-intersection-observer.
The render prop is called on all renders, so it would be up to you to determine if the value actually changed. Hence it would be better to use the onChange
since it does that for you. :)
from react-intersection-observer.
I think i'd need to see how you are handling onChange
and updating the view. There could potentially be an issue with how the state is updated.
A solution could be to change the key
prop for the <Observer>
after an update, to ensure it's recreated.
To get the inView
value outside onChange
you'd have to use the render props method. It will call your function with the current value of inView.
from react-intersection-observer.
Related Issues (20)
- Option to trigger only when document has a focus HOT 2
- If threshold=1, big elements on small viewports will never be inView HOT 3
- Should useInView return unobserve function? HOT 4
- Are the docs for `triggerOnce` inaccurate? HOT 2
- Issue on Safari when threshold is set to 1 HOT 2
- The delay option works in chrome but does not appear to work in safari HOT 1
- Minor error message bug HOT 2
- How you looking to add short video for each property? HOT 1
- Build errors after upgrading to Next 13.4.5 HOT 6
- No way to make active link on scroll in different components using .map() HOT 3
- Can't import the named export 'Component' from non EcmaScript module HOT 4
- package not working with webpack HOT 4
- Safari support <=13 is completely broken. HOT 3
- use same ref,useInView for multiple components HOT 1
- Hello author, why can setRef assign a value to ref and obtain an instance of the element? HOT 1
- Not working below desktop screen view HOT 1
- Prevent InView From Calling Functions in Initial Render HOT 2
- InView Component Doesn't Trigger onChange After Updating to Latest NextJS Version HOT 11
- Bump major version for breaking changes HOT 1
- Support a ref for root HOT 2
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-intersection-observer.