InView is not working exactly

[alive-vietnam-ti]

This module is great to handle the element in-view of a browser's viewport.
But I have a problem that you can see below the image.
It's not working exactly when I scrolling the browser.
The element is still not out of the screen has been toggle onNotInView.
"intoViewMargin" is a default value
How can I fix that?

[pocketjoso]

Hi, thanks for the kind words. :)

I think the settings you want for this case are:

• intoViewMargin: 0% (or even 20%, a positive number)
• threshold: 1
  Note that threshold was only added earlier this week, so you will need to make sure you update to the latest version of react-inview-monitor.

To understand threshold and intoViewMargin better, please see the MDN docs for IntersectionObserver, which is used under the hood:
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
(note that what react-inview-monitor intoViewMargin maps to rootMargin in the IntersectionObserver api)

[pocketjoso]

Although I'm not sure exactly how you are using react-inview-monitor - can you share the exact code for the InViewMonitor used here, with all the props you are sending it?