#18 PropTypes - custom validation

src/Demo.js

@@ -1,11 +1,12 @@
 import React from "react";
 import IframeComm from "react-iframe-comm"; // loads build file
 
-const Demo = ({}) => {
+const Demo = ({ }) => {
     // the html attributes to create the iframe with
     // make sure you use camelCase attribute names
     const attributes = {
         src: "https://pbojinov.github.io/iframe-communication/iframe.html",
+        // name: 'Demo',
         width: "100%",
         height: "175"
     };

src/IframeComm.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from 'prop-types';
+import { atLeastOneRequired } from './custom.proptypes'
 
 class IframeComm extends Component {
     constructor() {
@@ -93,6 +94,11 @@ IframeComm.defaultProps = {
     postMessageData: ""
 };
 
+const atLeastOne = atLeastOneRequired({
+    name: PropTypes.string,
+    src: PropTypes.string
+})
+
 IframeComm.propTypes = {
     /*
         Iframe Attributes
@@ -108,12 +114,12 @@ IframeComm.propTypes = {
         ]),
         frameBorder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        name: PropTypes.string,
+        name: atLeastOne,
         scrolling: PropTypes.string,
         // https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
         sandbox: PropTypes.string,
         srcDoc: PropTypes.string,
-        src: PropTypes.string.isRequired,
+        src: atLeastOne,
         width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     }),
 

src/custom.proptypes.js

@@ -0,0 +1,19 @@
+export function atLeastOneRequired(checkProps) {
+    return function(props, propName, compName) {
+      const requiredPropNames = Object.keys(checkProps);
+
+      const found = requiredPropNames.find((requiredProp) => props[requiredProp]);
+      // console.log(requiredPropNames);
+      try {
+        if (!found) {
+          throw new Error(
+            `One of ${requiredPropNames.join(',')} is required by '${compName}' component.`,
+          );
+        }
+        PropTypes.checkPropTypes(checkProps, props, propName, compName);
+      } catch (e) {
+        return e;
+      }
+      return null;
+    };
+  }