safely validate root prop for SSR #5

src/Observed.js

@@ -2,6 +2,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import validHTMLElement from './validHTMLElement';
 
 class Observed extends Component {
     static defaultProps = {
@@ -25,7 +26,7 @@ class Observed extends Component {
         onChange: PropTypes.func,
         onIntersect: PropTypes.func,
         options: PropTypes.shape({
-            root: PropTypes.instanceOf(Element),
+            root: validHTMLElement,
             rootMargin: PropTypes.string,
             threshold: PropTypes.oneOfType([PropTypes.array, PropTypes.number]),
         }),

src/validHTMLElement.js

@@ -0,0 +1,24 @@
+// SSR safe Valid HTML Element prop check
+
+export default function validHTMLElement(
+    props,
+    propName,
+    componentName = 'ANONYMOUS'
+) {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    if (props[propName]) {
+        const value = props[propName];
+        const isValid = value instanceof window.Element;
+
+        if (!isValid) {
+            return new Error(
+                `Prop name "${propName}" in <${componentName}> must be an HTML DOM element.`
+            );
+        }
+    }
+
+    return null;
+}