Helper to check for: Component vs Element, Class vs Functional and Component DOM vs Composite Element.

componentCheckerUtil.js

/**
* Helper to check for:
* Component vs Element
* Class vs Functional
* Component DOM vs Composite Element
*/

import React from 'react';

export function isClassComponent(component) {
  return (
    typeof component === 'function'
    && !!component.prototype.isReactComponent
  );
}

export function isFunctionComponent(component) {
  return (
    typeof component === 'function' &&
    String(component).includes('return React.createElement')
  );
}

export function isReactComponent(component) {
  return !!(isClassComponent(component) || isFunctionComponent(component));
}

export function isElement(element) {
  return React.isValidElement(element);
}

export function isDOMTypeElement(element) {
  return isElement(element) && typeof element.type === 'string';
}

export function isCompositeTypeElement(element) {
  return isElement(element) && typeof element.type === 'function';
}

    console.log(['isClassComponent', isClassComponent(component)]);
    console.log(['isFunctionComponent', isFunctionComponent(component)]);
    console.log(['isReactComponent', isReactComponent(component)]);
    console.log(['isElement', isElement(component)]);
    console.log(['isDOMTypeElement', isDOMTypeElement(component)]);
    console.log(['isCompositeTypeElement', isCompositeTypeElement(component)]);