feat(null-children): Support for null children and null DOM node (#52)

* feat(null-children): Support for null children and null DOM node

- Trigger invariant on observing if DOM node isn't found
- Do nothing if user passes null/undefined as children
- Handle re-renders from null/undefined to element children
- Remove prop onlyOnce from API and its deprecation warning
- Re-observing logic has been improved; no more unnecessary calls to observeElement/unobserveElement
- Getting options is now a function for perf speed and transpilation output size
- Removed duplicated test cases and solidified existing ones

BREAKING CHANGE: Drop support for React < 16.3.2

* chore(release): 1.0.0-beta.0

* chore(errorReporter): added configurable error reporter

* chore(release): 1.0.0-beta.1

* chore(readme): update docs about errorReporting

Author: Rendez

.gitignore

@@ -3,6 +3,3 @@ npm-debug.log*
 yarn-error.log
 lib
 coverage
-docs/static
-docs/favicon*
-docs/*.html

.storybook/addons.js

@@ -1,4 +1,4 @@
 import '@storybook/addon-options/register';
 import 'storybook-readme/register';
 import '@storybook/addon-actions/register';
-import '@storybook/addon-knobs/register';
+import '@storybook/addon-knobs/register';

.storybook/webpack.config.js

@@ -1,17 +1,13 @@
 const path = require('path');
 
 module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        loaders: ['style-loader', 'css-loader'],
-        include: path.resolve(__dirname, '../'),
-      },
-      {
-        test: /\.md$/,
-        loaders: ['raw-loader'],
-      },
-    ],
-  },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                loaders: ['style-loader', 'css-loader'],
+                include: path.resolve(__dirname, '../'),
+            },
+        ],
+    },
 };

.travis.yml

@@ -1,25 +1,21 @@
 language: node_js
 node_js:
-  - "10"
-  - "6"
+  - "8"
+  - "9"
 cache: yarn
 deploy:
   local_dir: docs
   provider: pages
   skip_cleanup: true
-  github_token: $GITHUB_TOKEN # Set in travis-ci.org dashboard
+  github_token: $GITHUB_TOKEN # Set on travis-ci.org dashboard
   on:
-   branch: master
-   condition: '"$TRAVIS_JOB_NUMBER" == *.1'
-before_install: yarn global add greenkeeper-lockfile@1
+    branch: master
+    condition: '"$TRAVIS_JOB_NUMBER" == *.1'
 before_script:
-  - greenkeeper-lockfile-update
-# true needs to be removed after https://github.com/conventional-changelog/conventional-github-releaser/pull/47 is fixed
-  - 'if [[ -n "$TRAVIS_TAG" ]] && [[ "$TRAVIS_JOB_NUMBER" == *.1 ]]; then yarn run create-github-release || true; fi'
+  - 'if [[ -n "$TRAVIS_TAG" ]] && [[ "$TRAVIS_JOB_NUMBER" == *.1 ]]; then yarn run create-github-release; fi'
 script:
   - yarn run lint
-  - yarn test -- --ci --coverage
+  - yarn test --ci --coverage
   - 'if [[ "$TRAVIS_JOB_NUMBER" == *.1 ]]; then yarn run build:storybook; fi'
-after_script: greenkeeper-lockfile-upload
 after_success:
   - bash <(curl -s https://codecov.io/bash)

CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="1.0.0"></a>
+# [1.0.0](https://github.com/researchgate/react-intersection-observer/compare/v1.0.0-beta.0...v1.0.0) (2019-04-18)
+
+
+
+<a name="1.0.0-beta.0"></a>
+# [1.0.0-beta.0](https://github.com/researchgate/react-intersection-observer/compare/v0.7.4...v1.0.0-beta.0) (2018-12-13)
+
+
+### Features
+
+* **null-children:** Support for null children and null DOM node ([04de77e](https://github.com/researchgate/react-intersection-observer/commit/04de77e))
+
+
+### BREAKING CHANGES
+
+* **null-children:** Drop support for React < 16.3.2
+
+-
+
+
+
 <a name="0.7.4"></a>
 ## [0.7.4](https://github.com/researchgate/react-intersection-observer/compare/v0.7.3...v0.7.4) (2018-10-23)
 

README.md

@@ -1,12 +1,12 @@
 <p align="center">
-  <img alt="React Intersection Observer" src=".github/logo.svg" width="888">
+  <img alt="React Intersection Observer" src=".github/logo.svg" />
 </p>
 
 <p align="center">
   <a href="https://travis-ci.org/researchgate/react-intersection-observer"><img alt="Build Status" src="https://travis-ci.org/researchgate/react-intersection-observer.svg?branch=master"></a>
   <a href="https://codecov.io/gh/researchgate/react-intersection-observer"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/researchgate/react-intersection-observer.svg"></a>
   <a href="https://www.npmjs.com/package/@researchgate/react-intersection-observer"><img alt="NPM version" src="https://img.shields.io/npm/v/@researchgate/react-intersection-observer.svg"></a>
-  <a href="https://github.com/prettier/prettier"><img alt="styled with prettier" src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg"></a>
+  <a href="https://www.npmjs.com/package/@researchgate/react-intersection-observer"><img alt="Dowloads per week" src="https://img.shields.io/npm/dw/@researchgate/react-intersection-observer.svg"></a>
 </p>
 
 <br>
@@ -18,33 +18,32 @@ is fully declarative and takes care of all the imperative parts for you.
 
 **React Intersection Observer** is good at:
 
-* **reusing instances**: comparing the passed options
-* **performance**: chooses smartly when to re-render and when to re-observe
-* **being unopinionated**: how to handle visibility changes is left entirely up to the developer
-* **being intuitive**: looks like the Native API
-* **small size**: ~6.5kB before minification (> 3.5kB or less when [minified](https://babeljs.io/repl#?babili=true&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoUSWOAbzk2ADsATAEQHkBZAOQhaRwAvgxx5CxGAFoWuMpXDR4zAG4oowFEyxiCq9Zu3yqSuAHd1TZgHNRuAhahWm1-eUwBXJhmAQmcYABnTi4AFQBPMCQAUQAbJBAkbQAKJHjE7QBKOnI4PLgiGA8nREkAOiCANRRY4BY4hKSYVPSm7IAydrgYSKQITDg0xu0ynqi4AF4pgkCYDRd5IXJyND9ZuBB1a2YEaMm4AHoAPSkAfgAdFgAqc7KLlgBqZLAADwAfAFJMgBIDincvD4_HAwOpAkgEBAIDAuFtmMkcNDYVBtkxsrRcvlVkx1psUcwAMpzGz7REwuH-U4FKHk_FMUYaEDJbIALgIAAZXvJ8nBsesANogdn7fCcl74AA0GwAjPshVKQAAmOXshUAZjl0oAunKKUT5tYyoEwLVmgdzoEHgdMmVNmBknjUZMAHw5Hk84ADZIAQkdO2ioyQswdFMy6Mx7vdMAAFjgzHAmEh49EoDgoMlCDTkU6QB51gAjQQoOCzA1wU1IKA1Xl-GAoZgksDAF5pQJwLQsA7QEGVtBNOBqWIeIP4TIUSN5JYTgpIIolP1Mcf5IRj5Y8wrFfwAA2-tCFIl3IGlB73ipPIDVQi3FCWAO8MF8_kC0ZqsQgZgAwrhQURkomXjAUpgEQKjhh6XoAIKpig4QVIEUFVuEf5IABHRdAhMFwRhSHAUgoFgROnpwMhAFlPELgxpM0y4SoZFJNYMYEdOeQbiU_4wEauBIMkyQAPpSswAgvNkEyus-r7vl-4DqNx7H8oJKFakBIHyawilhkukZTsuEYznO_jsXA3rUSBN7LHy8AQPm4JQColYNBkMCBLCYD7Im8Yucy_yePej5wNYs4AApQvELDJBAYAPms-y0CubpYms8BkvsEVRTiZTJW8bwJh4sSxJpNY4klWYUvsP7gpCSIUuFkWPoEGUlXSq48hZ3SxkG0YQLELD7NhWHQUhqV1aM7XPl1LCZLpPJUkNawjUQY3dVN-Rsvys3pTGC2dd1RkTDleVwDNtVzZtHXjXAbLslqBWtVZNl2VAbZ7XdlYPQ5TTOSgYBlAA1kg4SBF5unxJZ1mvZWBVmNGwDxMR4Vg7ZlYpQjD31exzJlIOw5hvFkatV4mwwGg0ZID1EzLZGyXGc9KOVg10JwFlFPumS2bMLtNP3XTrOlUzzH5OJeWSd-MnJKdi0sFKL2I1A81nd1gSrszRE-gTKBEyTE248xrH-NLD0FTy2mTrpuv7fl5C3j5QL-IwrAcLTUDvSk-uVlKTRQOETGFesQyOU9cCu07rTaJ930Bc0QfNfkKt-x93stYlA41MOAdx6HmMp0GQPTiDgwhzAhv5FDMOCDx6fwHtWNBmU6M2tXOMYvzeSxwXoxbLOVF7R7sF1iis4J83ZsV0XWnM8bwim7Om7m2Z5AHFcVy5FccChCTcAAJLaJW4I23ADtc1AcAQYFG-8q--boD9bXqwEbZoK-pPmCTiYPYHib58MgHL-feVPzGgg-4RwEtvR6SAMBtiQMAABR8AFwAECoYAfYBzACTNQSyR9izGnAZ6VBPUK5lB_hBWIgQIDmBhrEfyncH6hWfkkPCSM4GIMCMAfMMNoHhEDgMOBQDO4V15C-FwQZ2ysB_mgHAgRwRtgECwogPUUAgAgF4JyXCAigN3mlchlE4FkkIXAFeAABH8Ci6DqEQiIYmWgAqBB_kY9QJjaBbxgDvcBaUD7gygCIIOy8Dh3j3jQ2Il80A_WSJYoRgQpaO29pgbsyQ87AH2OyUgAQ4AAB4BFWJruRBi0ZknAAeA8QeeRWr8L2nbFg7iZbO0jo7KUYTrHyS1NHSMrcv5FPdAQwRLB4gfkEQFUJfSgyNOae6CeSwraAk0eI1AzjKkPRqmlRW2szYR2Cl1UmCy6rZCygmJMm91GuMfHMysoSL5XylsdHEq4Jm-WBK7apLQ2naxVt6IO1Sw5lBfIDAhUd2lvILh88EzQfm1N2fGAks5mQjInv8r-HyI6PMcmUKOZQUAsDChXEZILD7Itpoipo7d-4wGucsa2mivD3ILvirIzyvSwv9i5T5KBvlt1-drRORVugdxUZzDx7zGUIuxR4kZ4FiK8KcmUAQINuKYvaaKsW3L6osIAF6CFdOyOVE4hUyzKBSvFBDxUionCIVsggm7Nx5Nqh6kqgjYkTBgHOFr8j0o-oyqVs4ZWsqiaPUZ49dLjPMknIOHBLkB35JmaEkoCA8zpFG_A4ttosHwNdFYQbHaBRwGAMN-AWBBBQPmUKyayjYgfjUw-IbFmrluvmAAVq4jN0IyF7QdnWjAZRgKNrGEgf4aBYjMrbE4lxNtjlQG-LKFCzjWBtmQOgDiUlICJm0DkAAkMuiyUAPAYGgM8TNSyMSruXYEDwUR0wdqzauA95AD0xiCEy1gPTBn7BvfVLpD7MllDYawMW0NFYUGvT-u93SkB8AEE-gDr7gP8CQB-wS36ggXtXc-3Fh8wO3qDjBr9z6EPLqQ3qlDe1cNMHQ5-sKWG_3LonhHQOobmTsvyGbYNoaMqk03dxTZawpR_S9i6OjLS6W1vrTgGAEAmWBA4GYJgDaT09GLa-OD9Uz0RLgFxxuzNpz43BAARWHJ7fYXGu7RppPgOAnRA4CYwA24TowID6hsLJvK8n227v5FxppBn8BrXM_AWzLgtTcidXkdagQXP_R1HtPMSBtOVk4VSWQaAPBIoAI46fCBC-IW70xIcUyF8Ibm2RZec65n1Rs1P0eniUILPqhBSlitCtc-QIO9MyakOyNLzWRgKxFeqfgmtCJa00KUhHXZK2nCrTrWbkVMFiOEDg3gkCapbl6BhIwgiDrAT4FwC2owAbw-DR1_MJ4lZK7pCDIHuKGt4wEL0Xb-htVvYp4t0NupEHpEQAYUw9r4DJY-Ucl2eTjfqsTGGLAXvMcwAqolRqTbTgXkvZiK815BDvu2OAbD4AeGsNNtkZglE7VqH9boZCItUJgASJgX0xowAAEJIBiUQAAqmAFg6tuKZClPmDw8AzCCFkAmBmFgl3CfgUgKIrB35qZXkQWdUhaiYHAeEXtQYpCrGkvAIXR6wDoNKLOgcO86ogg0N2IX0oABsZQNTMru5AgCVZUchVQP4CObY4E1qsvAvw0GJe-OnEh8VvWApkzFQBl7Ag5GhG5SZroF3jLm0j1b5jakw8R-plyolPqxsAb94MrW7XmJDbxVDyePvM8R4I9ygqt4eSu1o7n_7JeiX7CCCECIUQHm--5dkKk7eG9snKSEM7jnDU-qQ0HfY0yWcjsc0FwvlKv7ybq7pXbiMa_K2u_XqjMemC5ViFtpfdk28_sL2M-rxTvwe-0GwOoXAlEpHaQcA4gxAi1G0DIPNBakBSHYjL5gggiNSC8AIJgKvsRB2n2JImUEkLRDwBwGwNELxNEDwJUBzAQB2iwJumlMZqZuVEgE4skDOm2qjI-FKNKBqmknAKbltvoBoFoM0KVh1uvrOBKHQe6PgESCzvEJIgwJMn5Crguh9OfEwERvAIWP5MAK1jOJgPVMfDAM4uACokLugGAc7j-hIeQgdJgPWLEGUJKMwUfsAT6ADjaoEPmqFFtiPgXlVv6ifjWIoIujAJfiwIzszs4junhFJnuszK1Ipv7k_LyjLO4ZxIkDuhFDxoLG-J-CLL-ADvyGekpAbm4c5rERpNYfKt4dnmYTtkRhYX6vod3hHD4T1DsmkZkjnswS8oYbmsYe_qUQFnkOYVzPtsxIdjpMdonLYU0AAOoUL05MCKLKIr7F63p76s4V7WEh4nLtJIbjFJ4N4EYMGFyHAP7PrJxDiCBI5b4HTAhwKMCPRJRJCh4pFlb6Ta5tq9oe4PL4FzpPYg5JCTbTaOYPZA7PZJBs5_ZlaYD5bgYdjxBnZMHTgrijG3goRa6AEoC5TwBrYaJHKOxjoUDAmmD0DYGVS0hOhCAUBAA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=true&sourceType=module&lineWrap=false&presets=react%2Cbabili&prettier=false&targets=&version=6.26.0&envVersion=), ~1.3kB gzipped)
+-   **reusing instances**: comparing the passed options
+-   **performance**: chooses smartly when to re-render and when to re-observe
+-   **being unopinionated**: how to handle visibility changes is left entirely up to the developer
+-   **being intuitive**: looks like the Native API
 
 <br>
 
 <details>
 <summary><strong>Table of Contents</strong></summary>
 
-* [Getting started](#getting-started)
-  * [Installation](#installation)
-  * [Inside your codebase](#inside-your-codebase)
-* [What does IntersectionObserver do?](#what-does-intersectionobserver-do)
-* [Why use this component?](#why-use-this-component)
-  * [No bookkeeping](#no-bookkeeping)
-  * [No extra markup](#no-extra-markup)
-  * [Easy to adopt](#easy-to-adopt)
-* [Documentation](#documentation)
-* [Options](#options)
-* [Notes](#notes)
-* [Polyfill](#polyfill)
-* [IntersectionObserver's Browser Support](#intersectionobservers-browser-support)
-* [Contributing](#contributing)
-* [License](#license)
-  </details>
+-   [Getting started](#getting-started)
+    -   [Installation](#installation)
+    -   [Inside your codebase](#inside-your-codebase)
+-   [What does IntersectionObserver do?](#what-does-intersectionobserver-do)
+-   [Why use this component?](#why-use-this-component)
+    -   [No bookkeeping](#no-bookkeeping)
+    -   [No extra markup](#no-extra-markup)
+    -   [Easy to adopt](#easy-to-adopt)
+-   [Documentation](#documentation)
+-   [Options](#options)
+-   [Notes](#notes)
+-   [Polyfill](#polyfill)
+-   [IntersectionObserver's Browser Support](#intersectionobservers-browser-support)
+-   [Contributing](#contributing)
+-   [License](#license)
+    </details>
 
 ---
 
@@ -95,8 +94,7 @@ npm install --save intersection-observer
 > IntersectionObservers calculate how much of a target element overlaps (or "intersects with") the visible portion of a
 > page, also known as the browser's "viewport":
 >
-> [Dan Callahan](https://hacks.mozilla.org/2017/08/intersection-observer-comes-to-firefox/) · <a href="https://creativecommons.org/licenses/by-sa/3.0/">
-> <img id="licensebutton_slim" alt="Creative Commons License" src="https://i.creativecommons.org/l/by-sa/3.0/80x15.png" style="margin-right:10px;margin-bottom:4px; border: 0;"></a>
+> [Dan Callahan](https://hacks.mozilla.org/2017/08/intersection-observer-comes-to-firefox/)&nbsp;&middot;&nbsp;<a href="https://creativecommons.org/licenses/by-sa/3.0/"><img id="licensebutton_slim" alt="Creative Commons License" src="https://i.creativecommons.org/l/by-sa/3.0/80x15.png" style="margin-right:10px;margin-bottom:4px; border: 0;"></a>
 
 ![Graphic example](https://hacks.mozilla.org/files/2017/08/Blank-Diagram-Page-1.png)
 
@@ -118,8 +116,8 @@ up and re-observes nodes on-demand to avoid any unexpected memory leaks.
 ### No extra markup
 
 ReactIntersectionObserver does not create any extra DOM elements, it attaches to the only child you'll provide to it.
-Internally it warns you if attaching a `ref` to it fails - common mistake when using a stateless component in React 15 -
-and will invoke any existing `ref` callback upon the passed child element.
+This is done using `findDOMNode` to retrieve the first DOM node found. If your child already has an existing `ref`,
+either a callback or object (from createRef), these will be handled normally in either case.
 
 ### Easy to adopt
 
@@ -131,10 +129,10 @@ upon.
 
 Some of the things you may want to use ReactIntersectionObserver for:
 
-* Determining advertisement impressions
-* Lazy loading - Images, or anything that will enter the viewport
-* Occlusion culling - Don't render an object until is close to the viewport edges
-* [Sentinel Scrolling - Infinite scroller with a recycled Sentinel](https://github.com/researchgate/react-intersection-list)
+-   Determining advertisement impressions
+-   Lazy loading - Images, or anything that will enter the viewport
+-   Occlusion culling - Don't render an object until is close to the viewport edges
+-   [Sentinel Scrolling - Infinite scroller with a recycled Sentinel](https://github.com/researchgate/react-intersection-list)
 
 ## Documentation
 
@@ -150,8 +148,7 @@ Find multiple examples and usage guidelines under:
 Recipes are useful code snippets solutions to common problems, for example, how to use ReactIntersectionObserver within
 a
 [Higher Order Component](https://researchgate.github.io/react-intersection-observer/?selectedKind=Recipes&selectedStory=Higher%20Order%20Component).
-<br>
-Here's how to create an **element monitoring** component:
+<br> Here's how to create an **element monitoring** component:
 
 ```jsx
 import React, { Component } from 'react';
@@ -162,28 +159,26 @@ export default class ViewableMonitor extends Component {
     static propTypes = {
         tag: PropTypes.node,
         children: PropTypes.func.isRequired,
-    }
+    };
 
     static defaultProps = {
         tag: 'div',
-    }
+    };
 
     state = {
         isIntersecting: false,
-    }
+    };
 
     handleChange = ({ isIntersecting }) => {
         this.setState({ isIntersecting });
     };
-    
+
     render() {
         const { tag: Tag, children, ...rest } = this.props;
 
         return (
             <Observer {...rest} onChange={this.handleChange}>
-                <Tag>
-                    {children(this.state.isIntersecting)}
-                </Tag>
+                <Tag>{children(this.state.isIntersecting)}</Tag>
             </Observer>
         );
     }
@@ -195,16 +190,28 @@ import React from 'react';
 import ViewableMonitor from './ViewableMonitor';
 
 export default () => (
-    <ViewableMonitor>
-        {isViewable =>
-            isViewable ? 'I am viewable' : 'I am still hiding'
-        }
-    </ViewableMonitor>
+    <ViewableMonitor>{isViewable => (isViewable ? 'I am viewable' : 'I am still hiding')}</ViewableMonitor>
 );
 ```
 
 Discover more recipes in our [examples section](docs/README.md).
 
+### Exception handling
+
+By default, an `invariant` error is thrown if there isn't a DOM node to observe when mounted. We've added a helpful and descriptive message that's supposed to help you identify potential problems early on. However, this could also unexpectedtly trigger in production, specially with dynamic children, causing a bigger problem (bubbling up) if not handled correctly (e.g.: error boundary). In such cases, you can set the config for the error reporter to adjust it to your needs:
+
+```js
+import { Config } from '@researchgate/react-intersection-observer';
+
+Config.errorReporter(function(errorMsg) {
+    if (process.env.NODE_ENV === 'production') {
+        sendReport((errorMsg);
+    } else {
+        console.error(errorMsg);
+    }
+});
+```
+
 ### Options
 
 **root**: `HTMLElement|string` | default `window object`
@@ -230,21 +237,21 @@ disabling the observing mechanism and restoring it later.
 
 Function that will be invoked whenever an observer's callback contains this target in its changes.
 
-**children** (required): `React.Element<*>`
+**children**: `React.Element<*>|null`
 
-Single React component or element that is used as the target (observable).
+Single React component or element that is used as the target (observable). As of `v1.0.0`, children can be null. Null children won't be observed.
 
 ### Notes
 
-* According to the spec, an initial event is being fired when starting to observe a non-intersecting element as well.
-  * _Edge's implementation seems to
-    [miss the initial event](https://github.com/w3c/IntersectionObserver/issues/222#issuecomment-311539591), although
-    Edge 16 behavior aligns with the spec._
-* Changes happen asynchronously, similar to the way `requestIdleCallback` works.
-* Although you can consider callbacks immediate - always below 1 second - you can also get an immediate response on an
-  element's visibility with `observer.takeRecords()`.
-* The primitives `Map` an `Set` are required. You may need to include a polyfill for browsers lacking ES2015 support. If
-  you're using babel, include `"babel-polyfill"` somewhere to your codebase.
+-   According to the spec, an initial event is being fired when starting to observe a non-intersecting element as well.
+    -   _Edge's implementation seems to
+        [miss the initial event](https://github.com/w3c/IntersectionObserver/issues/222#issuecomment-311539591), although
+        Edge 16 behavior aligns with the spec._
+-   Changes happen asynchronously, similar to the way `requestIdleCallback` works.
+-   Although you can consider callbacks immediate - always below 1 second - you can also get an immediate response on an
+    element's visibility with `observer.takeRecords()`.
+-   The primitives `Map` an `Set` are required. You may need to include a polyfill for browsers lacking ES2015 support. If
+    you're using babel, include `"babel-polyfill"` somewhere to your codebase.
 
 ## Polyfill
 
@@ -313,10 +320,10 @@ onChange = entry => requestIdleCallback(() => this.handleChange(entry));
     </tr>
 </table>
 
-* [1][reportedly available](https://www.chromestatus.com/features/5695342691483648), it didn't trigger the events on
-  initial load and lacks `isIntersecting` until later versions.
-* [2] This feature was implemented in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the
-  preference `dom.IntersectionObserver.enabled`.
+-   [1][reportedly available](https://www.chromestatus.com/features/5695342691483648), it didn't trigger the events on
+    initial load and lacks `isIntersecting` until later versions.
+-   [2] This feature was implemented in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the
+    preference `dom.IntersectionObserver.enabled`.
 
 ### Using polyfill
 

docs/docs/index.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import '@babel/polyfill';
 import 'intersection-observer';
 import React from 'react';
 import { storiesOf } from '@storybook/react';