Add support for React.forwardRef and React.createRef

Components wrapped with `React.forwardRef` will now correctly have their refs passed to `react-waypoint` as they don't recognize custom `innerRef` prop, but should know what to do with received `ref` (that is - pass it to underlaying DOM element).

Also the support for `React.createRef` has been added - which is a new React API, an alternative to callback refs. It returns an object with shape of `{ current: null }`, so the ref can and should be set on the `current` property (it's done by React internally when passingit as ref prop to an element).

package.json

@@ -68,6 +68,7 @@
   ],
   "dependencies": {
     "consolidated-events": "^1.1.0 || ^2.0.0",
-    "prop-types": "^15.0.0"
+    "prop-types": "^15.0.0",
+    "react-is": "^16.6.3"
   }
 }

src/waypoint.jsx

@@ -1,6 +1,7 @@
 import { addEventListener } from 'consolidated-events';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { isForwardRef } from 'react-is';
 
 import computeOffsetPixels from './computeOffsetPixels';
 import constants from './constants';
@@ -295,11 +296,15 @@ export default class Waypoint extends BaseClass {
       return <span ref={this.refElement} style={{ fontSize: 0 }} />;
     }
 
-    if (isDOMElement(children)) {
+    if (isDOMElement(children) || isForwardRef(children.type)) {
       const ref = (node) => {
         this.refElement(node);
         if (children.ref) {
-          children.ref(node);
+          if (typeof children.ref === 'function') {
+            children.ref(node);
+          } else {
+            children.ref.current = node;
+          }
         }
       };