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

-

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)

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img alt="React Intersection Observer" src=".github/logo.svg" width="888">
+  <img alt="React Intersection Observer" src="https://raw.githubusercontent.com/researchgate/react-intersection-observer/master/.github/logo.svg" width="888">
 </p>
 
 <p align="center">
@@ -22,7 +22,9 @@ is fully declarative and takes care of all the imperative parts for you.
 * **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)
+* **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)
 
 <br>
 
@@ -95,8 +97,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 +119,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
 
@@ -150,8 +151,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 +162,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,11 +193,7 @@ 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>
 );
 ```
 
@@ -230,7 +224,7 @@ 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<*>`
 
 Single React component or element that is used as the target (observable).
 

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';