Releases: thebuilder/react-intersection-observer
v8.28.6
v8.28.5
v8.28.4
v8.28.3
v8.28.2
v8.28.1
v8.28.0
8.28.0 (2020-09-07)
Features
Details
This is a rewrite of the internal handling of IntersectionObservers, alongside general refactoring and alignment of the code.
- Breaking change: Remove default export for the InView component
- Remove outdated fixes for the initial IntersectionObserver browser implementation. These were needed 3 years ago, to ensure all browsers acted according to the spec
- Support multiple observers on the same element. Closes #340
- Rewrite tests, so they use test-utils to properly mock the IntersectionObserver instances
- Switch to microbundle for compiling
- Add initial IntersectionObserver v2 support. Closes #368
IntersectionObserver v2 🧪
The new
v2 implementation of IntersectionObserver
extends the original API, so you can track if the element is covered by another
element or has filters applied to it. Useful for blocking clickjacking attempts
or tracking ad exposure.
To use it, you'll need to add the new trackVisibility and delay options.
When you get the entry back, you can then monitor if isVisible is true.
const TrackVisible = () => {
const { ref, entry } = useInView({ trackVisibility: true, delay: 100 });
return <div ref={ref}>{entry?.isVisible}</div>;
};This is still a very new addition, so check
caniuse for current browser
support. If trackVisibility has been set, and the current browser doesn't
support it, a fallback has been added to always report isVisible as true.
It's not added to the TypeScript lib.d.ts file yet, so you will also have to
extend the IntersectionObserverEntry with the isVisible boolean.