feat: add initial support for IntersectionObserver v2

BREAKING CHANGE

Author: thebuilder

README.md

@@ -26,7 +26,7 @@ to tell you when an element enters or leaves the viewport. Contains both a
   where possible
 - ⚙️ **Matches native API** - Intuitive to use
 - 🌳 **Tree-shakeable** - Only include the parts you use
-- 💥 **Tiny bundle** [~1.7 kB gzipped][bundlephobia-url]
+- 💥 **Tiny bundle** [~1.5 kB gzipped][bundlephobia-url]
 
 ## Installation
 
@@ -42,25 +42,24 @@ or NPM:
 npm install react-intersection-observer --save
 ```
 
-> ⚠️ You also want to add the
-> [intersection-observer](https://www.npmjs.com/package/react-intersection-observer)
-> polyfill for full browser support. Check out adding the [polyfill](#polyfill)
-> for details about how you can include it.
-
 ## Usage
 
 ### Hooks 🎣
 
 #### `useInView`
 
 ```js
+// Use object destructing, so you don't need to remember the exact order
+const { ref, inView, entry } = useInView(options);
+
+// Or array destructing, making it easy to customize the field names
 const [ref, inView, entry] = useInView(options);
 ```
 
 React Hooks make it easy to monitor the `inView` state of your components. Call
 the `useInView` hook with the (optional) [options](#options) you need. It will
 return an array containing a `ref`, the `inView` status and the current
-[`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).
+[`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).
 Assign the `ref` to the DOM element you want to monitor, and the hook will
 report the status.
 
@@ -69,7 +68,7 @@ import React from 'react';
 import { useInView } from 'react-intersection-observer';
 
 const Component = () => {
-  const [ref, inView, entry] = useInView({
+  const { ref, inView, entry } = useInView({
     /* Optional options */
     threshold: 0,
   });
@@ -141,21 +140,23 @@ export default Component;
 
 ### Options
 
-Provide these as props on the **`<InView />`** component and as the options
+Provide these as props on the **`<InView />`** component or as the options
 argument for the hooks.
 
-| Name            | Type               | Default  | Required | Description                                                                                                                                                                                                                                                                                 |
-| --------------- | ------------------ | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **root**        | Element            | document | false    | The IntersectionObserver interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is null, then the bounds of the actual document viewport are used. |
-| **rootMargin**  | string             | '0px'    | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                                                                                                                                                          |
-| **threshold**   | number \| number[] | 0        | false    | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                                                                                              |
-| **skip**        | boolean            | false    | false    | Skip creating the IntersectionObserver. You can use this to enable and disable the observer as needed. If `skip` is set while `inView`, the current state will still be kept.                                                                                                               |
-| **triggerOnce** | boolean            | false    | false    | Only trigger this method once.                                                                                                                                                                                                                                                              |
+| Name                   | Type               | Default   | Required | Description                                                                                                                                                                                                                                                                                 |
+| ---------------------- | ------------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **root**               | Element            | document  | false    | The IntersectionObserver interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is null, then the bounds of the actual document viewport are used. |
+| **rootMargin**         | string             | '0px'     | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                                                                                                                                                          |
+| **threshold**          | number \| number[] | 0         | false    | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                                                                                              |
+| **trackVisibility** 🧪 | boolean            | false     | false    | A boolean indicating whether this IntersectionObserver will track changes in a target’s visibility.                                                                                                                                                                                         |
+| **delay** 🧪           | number             | undefined | false    | A number indicating the minimum delay in milliseconds between notifications from this observer for a given target. This must be set to at least `100` if `trackVisibility` is `true`.                                                                                                       |
+| **skip**               | boolean            | false     | false    | Skip creating the IntersectionObserver. You can use this to enable and disable the observer as needed. If `skip` is set while `inView`, the current state will still be kept.                                                                                                               |
+| **triggerOnce**        | boolean            | false     | false    | Only trigger the observer once.                                                                                                                                                                                                                                                             |
 
 > ⚠️ When passing an array to `threshold`, store the array in a constant to
 > avoid the component re-rendering too often. For example:
 
-```js
+```jsx
 const THRESHOLD = [0.25, 0.5, 0.75]; // Store multiple thresholds in a constant
 const MyComponent = () => {
   const [ref, inView, entry] = useInView({ threshold: THRESHOLD });
@@ -177,6 +178,29 @@ The **`<InView />`** component also accepts the following props:
 | **children** | `({ref, inView, entry}) => React.ReactNode`, `ReactNode` |         | true     | Children expects a function that receives an object containing the `inView` boolean and a `ref` that should be assigned to the element root. Alternatively pass a plain child, to have the `<InView />` deal with the wrapping element. You will also get the `IntersectionObserverEntry` as `entry, giving you more details. |
 | **onChange** | `(inView, entry) => void`                                |         | false    | Call this function whenever the in view state changes. It will receive the `inView` boolean, alongside the current `IntersectionObserverEntry`.                                                                                                                                                                               |
 
+### 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`.
+
 ## Recipes
 
 The `IntersectionObserver` itself is just a simple but powerful tool. Here's a
@@ -193,7 +217,7 @@ few ideas for how you can use it.
 
 You can wrap multiple `ref` assignments in a single `useCallback`:
 
-```js
+```jsx
 import React, { useRef } from 'react';
 import { useInView } from 'react-intersection-observer';
 

package.json

@@ -131,51 +131,52 @@
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0|| ^17.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
+    "@babel/cli": "^7.11.5",
+    "@babel/core": "^7.11.5",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.9.0",
-    "@emotion/react": "11.0.0-next.12",
-    "@storybook/addon-actions": "^6.0.13",
-    "@storybook/addon-viewport": "^6.0.13",
-    "@storybook/react": "^6.0.13",
-    "@storybook/theming": "^6.0.13",
+    "@emotion/react": "11.0.0-next.15",
+    "@storybook/addon-actions": "^6.0.21",
+    "@storybook/addon-viewport": "^6.0.21",
+    "@storybook/react": "^6.0.21",
+    "@storybook/theming": "^6.0.21",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^10.0.2",
-    "@types/jest": "^26.0.8",
-    "@types/react": "^16.9.34",
+    "@types/jest": "^26.0.12",
+    "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.6",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.1",
+    "@typescript-eslint/parser": "^4.0.1",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.3.0",
+    "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-dev-expression": "^0.2.2",
     "concurrently": "^5.1.0",
     "coveralls": "^3.0.11",
-    "eslint": "^6.8.0",
+    "eslint": "^7.8.0",
     "eslint-config-react-app": "^5.2.1",
-    "eslint-plugin-flowtype": "^4.7.0",
+    "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^3.0.0",
-    "framer-motion": "^1.10.3",
+    "eslint-plugin-react-hooks": "^4.1.0",
+    "framer-motion": "^2.6.5",
     "husky": "^4.2.5",
-    "intersection-observer": "^0.7.0",
-    "jest": "^25.3.0",
+    "intersection-observer": "^0.11.0",
+    "jest": "^26.4.2",
     "lint-staged": "^10.1.3",
     "microbundle": "^0.12.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
+    "prettier-plugin-pkg": "^0.8.0",
     "react": "^17.0.0-rc.1",
     "react-dom": "^17.0.0-rc.1",
     "react-test-renderer": "^17.0.0-rc.1",
-    "typescript": "^3.8.3"
+    "typescript": "^4.0.2"
   },
   "resolutions": {
     "react": "17.0.0-rc.1",

src/InView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IntersectionObserverProps, PlainChildrenProps } from './index';
-import { newObserve } from './observers';
+import { observe } from './observers';
 
 type State = {
   inView: boolean;
@@ -37,7 +37,9 @@ export class InView extends React.Component<
       prevProps.rootMargin !== this.props.rootMargin ||
       prevProps.root !== this.props.root ||
       prevProps.threshold !== this.props.threshold ||
-      prevProps.skip !== this.props.skip
+      prevProps.skip !== this.props.skip ||
+      prevProps.trackVisibility !== this.props.trackVisibility ||
+      prevProps.delay !== this.props.delay
     ) {
       this.unobserve();
       this.observeNode();
@@ -63,11 +65,16 @@ export class InView extends React.Component<
 
   observeNode() {
     if (!this.node || this.props.skip) return;
-    const { threshold, root, rootMargin } = this.props;
-    this._unobserveCb = newObserve(this.node, this.handleChange, {
+    const { threshold, root, rootMargin, trackVisibility, delay } = this.props;
+
+    this._unobserveCb = observe(this.node, this.handleChange, {
       threshold,
       root,
       rootMargin,
+      // @ts-ignore
+      trackVisibility,
+      // @ts-ignore
+      delay,
     });
   }
 
@@ -118,6 +125,8 @@ export class InView extends React.Component<
       rootMargin,
       onChange,
       skip,
+      trackVisibility,
+      delay,
       ...props
     } = this.props;
 

src/__tests__/InView.test.js src/__tests__/InView.test.tsxsrc/__tests__/InView.test.js renamed to src/__tests__/InView.test.tsx

@@ -31,24 +31,28 @@ it('should render plain children', () => {
 
 it('should render with tag', () => {
   const { container } = render(<InView tag="span">inner</InView>);
-  const tagName = container.firstChild.tagName.toLowerCase();
+  const tagName = container.children[0].tagName.toLowerCase();
   expect(tagName).toBe('span');
 });
 
 it('should render with className', () => {
   const { container } = render(<InView className="inner-class">inner</InView>);
-  expect(container.firstChild).toHaveClass('inner-class');
+  expect(container.children[0]).toHaveClass('inner-class');
 });
 
 it('Should respect skip', () => {
   const cb = jest.fn();
-  render(<InView skip onChange={cb}></InView>);
-  mockAllIsIntersecting();
+  render(
+    <InView skip onChange={cb}>
+      inner
+    </InView>,
+  );
+  mockAllIsIntersecting(true);
 
   expect(cb).not.toHaveBeenCalled();
 });
 it('Should unobserve old node', () => {
-  const { rerender, container } = render(
+  const { rerender } = render(
     <InView>
       {({ inView, ref }) => (
         <div key="1" ref={ref}>
@@ -77,7 +81,7 @@ it('Should ensure node exists before observing and unobserving', () => {
 it('Should recreate observer when threshold change', () => {
   const { container, rerender } = render(<InView>Inner</InView>);
   mockAllIsIntersecting(true);
-  const instance = intersectionMockInstance(container.firstChild);
+  const instance = intersectionMockInstance(container.children[0]);
   jest.spyOn(instance, 'unobserve');
 
   rerender(<InView threshold={0.5}>Inner</InView>);
@@ -87,27 +91,28 @@ it('Should recreate observer when threshold change', () => {
 it('Should recreate observer when root change', () => {
   const { container, rerender } = render(<InView>Inner</InView>);
   mockAllIsIntersecting(true);
-  const instance = intersectionMockInstance(container.firstChild);
+  const instance = intersectionMockInstance(container.children[0]);
   jest.spyOn(instance, 'unobserve');
 
-  rerender(<InView root={{}}>Inner</InView>);
+  const root = document.createElement('div');
+  rerender(<InView root={root}>Inner</InView>);
   expect(instance.unobserve).toHaveBeenCalled();
 });
 
 it('Should recreate observer when rootMargin change', () => {
   const { container, rerender } = render(<InView>Inner</InView>);
   mockAllIsIntersecting(true);
-  const instance = intersectionMockInstance(container.firstChild);
+  const instance = intersectionMockInstance(container.children[0]);
   jest.spyOn(instance, 'unobserve');
 
   rerender(<InView rootMargin="10px">Inner</InView>);
   expect(instance.unobserve).toHaveBeenCalled();
 });
 
 it('Should unobserve when triggerOnce comes into view', () => {
-  const { container, rerender } = render(<InView triggerOnce>Inner</InView>);
+  const { container } = render(<InView triggerOnce>Inner</InView>);
   mockAllIsIntersecting(false);
-  const instance = intersectionMockInstance(container.firstChild);
+  const instance = intersectionMockInstance(container.children[0]);
   jest.spyOn(instance, 'unobserve');
   mockAllIsIntersecting(true);
 
@@ -116,7 +121,7 @@ it('Should unobserve when triggerOnce comes into view', () => {
 
 it('Should unobserve when unmounted', () => {
   const { container, unmount } = render(<InView triggerOnce>Inner</InView>);
-  const instance = intersectionMockInstance(container.firstChild);
+  const instance = intersectionMockInstance(container.children[0]);
   jest.spyOn(instance, 'unobserve');
 
   unmount();