---
search:
  exclude: true
changelog:
  category: Release
  version: 8.28.0
date: '2020-09-07T11:55:24Z'
seo:
  description: >-
    modern rewrite (#370) (1537592) This is a rewrite of the internal handling
    of IntersectionObservers, alongside general refactoring and alignment of the
    code…
title: v8.28.0
type: changelog
---
# [8.28.0](https://github.com/thebuilder/react-intersection-observer/compare/v8.27.1...v8.28.0) (2020-09-07)


### Features

* modern rewrite ([#370](https://github.com/thebuilder/react-intersection-observer/issues/370)) ([1537592](https://github.com/thebuilder/react-intersection-observer/commit/1537592aa2a31d5a6c3110051ebeb62a5642d39f))

### 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 <InView> 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](https://developers.google.com/web/updates/2019/02/intersectionobserver-v2)
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`.

```jsx
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](https://caniuse.com/#feat=intersectionobserver-v2) 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.