chore(docs): New recipe NativeObserver

The recipe documents how to gracefully handle environments without IntersectionObserver creating a component to do so.

Author: Rendez

README.md

@@ -155,9 +155,19 @@ Here's how to create an **element monitoring** component:
 
 ```jsx
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Observer from '@researchgate/react-intersection-observer';
 
 export default class ViewableMonitor extends Component {
+    static propTypes = {
+        tag: PropTypes.node,
+        children: PropTypes.func.isRequired,
+    }
+
+    static defaultProps = {
+        tag: 'div',
+    }
+
     state = {
         isIntersecting: false,
     }
@@ -167,16 +177,13 @@ export default class ViewableMonitor extends Component {
     };
 
     render() {
-        const { children, mount: Tag, ...rest } = this.props;
-        let element = children(this.state.isIntersecting);
-
-        if (Tag) {
-            element = <Tag>{element}</Tag>;
-        }
+        const { tag: Tag, children, ...rest } = this.props;
 
         return (
             <Observer {...rest} onChange={this.handleChange}>
-                {element}
+                <Tag>
+                    {children(this.state.isIntersecting)}
+                </Tag>
             </Observer>
         );
     }

docs/README.md

@@ -20,6 +20,7 @@ common situations that can be approached with ReactIntersectionObserver:
 * [Higher Order Component](docs/components/HigherOrderComponent/)
 * [Tracking Ad Impressions](docs/components/ImpressionTracking/)
 * [Viewable Monitor](docs/components/ViewableMonitor/)
+* [Graceful Degradation](docs/components/NativeObserver/)
 
 ### Can I submit a new recipe?
 

docs/docs/components/NativeObserver/README.md

@@ -0,0 +1,25 @@
+## Gracefully handling environments without IntersectionObserver support
+
+This module assumes `IntersectionObserver` is available as a global - the polyfill is necessary. However, there may be
+situations where we want to do progressive enhancement and only observe elements if it's available.
+
+To prevent an exception in such cases, let's create a component that will gracefully fail if `IntersectionObserver`
+doesn't exist, and instead render the passed children naturally.
+
+### Source
+
+```jsx
+import React from 'react';
+import Observer from '@researchgate/react-intersection-observer';
+
+// Exits early if all IntersectionObserver and IntersectionObserverEntry
+// features are natively supported.
+const hasNativeSupport =
+    'IntersectionObserver' in window &&
+    'IntersectionObserverEntry' in window &&
+    'intersectionRatio' in window.IntersectionObserverEntry.prototype;
+
+export default function NativeObserver(props) {
+    return hasNativeSupport ? <Observer {...props} /> : props.children;
+}
+```