Merge pull request #278 from Andarist/support-forward-ref

Add support for React.forwardRef and React.createRef

README.md

@@ -278,9 +278,32 @@ composite component (e.g. `<MyComponent />`).
 
 Waypoint needs a DOM node to compute its boundaries. When you pass a DOM
 component to Waypoint, it handles getting a reference to the DOM node through
-the `ref` prop automatically. If you pass a composite component, you need to
-make use of the `innerRef` prop passed by Waypoint to your component. Simply
-pass it through as the `ref` of a DOM component and you're all set. Like in
+the `ref` prop automatically.
+
+If you pass a composite component, you can wrap it with `React.forwardRef` (requires `react@^16.3.0`)
+and have the `ref` prop being handled automatically for you, like this:
+
+```jsx
+class Block extends React.Component {
+  render() {
+    return <div ref={this.props.innerRef}>Hello</div>
+  }
+}
+
+const BlockWithRef = React.forwardRef((props, ref) => {
+  return <Block innerRef={ref} {...props} />
+})
+
+const App = () => (
+  <Waypoint>
+    <BlockWithRef />
+  </Waypoint>
+)
+```
+
+If you can't do that because you are using older version of React then
+you need to make use of the `innerRef` prop passed by Waypoint to your component.
+Simply pass it through as the `ref` of a DOM component and you're all set. Like in
 this example:
 
 ```jsx

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;
+          }
         }
       };