How to detect a React component vs. a React element?

by

If you really want to type check for

  • component vs element

  • class vs functional component

  • DOM vs Composite Element

You could try something like this.

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

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

function isReactComponent(component) {
    return (
        isClassComponent(component) || 
        isFunctionComponent(component)
    )
}

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

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

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

USE

// CLASS BASED COMPONENT
class Foo extends React.Component {
  render(){
      return <h1>Hello</h1>;
  }
}

const foo = <Foo />;

//FUNCTIONAL COMPONENT
function Bar (props) { return <h1>World</h1> }
const bar = <Bar />;

// REACT ELEMENT
const header = <h1>Title</h1>;

// CHECK
isReactComponent(Foo); // true
isClassComponent(Foo); // true
isFunctionComponent(Foo); // false
isElement(Foo); // false

isReactComponent(<Foo />) // false
isElement(<Foo />) // true
isDOMTypeElement(<Foo />) // false
isCompositeTypeElement(<Foo />) // true

isReactComponent(Bar); // true
isClassComponent(Bar); // false
isFunctionComponent(Bar); // true
isElement(Bar); // false

isReactComponent(<Bar />) // false
isElement(<Bar />) // true
isDOMTypeElement(<Bar />) // false
isCompositeTypeElement(<Bar />) // true

isReactComponent(header); // false
isElement(header); // true
isDOMTypeElement(header) // true
isCompositeTypeElement(header) // false

Example Codepen

More Related Contents:

  1. What is component in reactjs?
  2. The useState set method is not reflecting a change immediately
  3. Call child method from parent
  4. Window is not defined in Next.js React app
  5. React Context vs React Redux, when should I use each one? [closed]
  6. Correct way to push into state array
  7. Simple Component is not rendering: React js
  8. React JS – Uncaught TypeError: this.props.data.map is not a function
  9. Pass react component as props
  10. react-router getting this.props.location in child components
  11. How to register event with useEffect hooks?
  12. Is there a generic way to set state in React Hooks? How to manage multiple states?
  13. React Function Components with hooks vs Class Components
  14. Can I execute a function after setState is finished updating?
  15. where is create-react-app webpack config and files?
  16. Importing multiple files in react
  17. Is there a way to use leaflet.heat in react?
  18. onEnter not called in React-Router
  19. react-router go back a page how do you configure history?
  20. TypeScript React.FC confusion
  21. React Router Dom routes are returning blank pages
  22. how to set up an inline svg with webpack
  23. Jest – SyntaxError: Cannot use import statement outside a module
  24. Does strict mode work differently with React 18?
  25. How to parse html to React component?
  26. How to properly use useHistory () from react-router-dom?
  27. React Error: “SharedArrayBuffer is not defined” in Firefox
  28. Object is not extensible error when creating new attribute for array of objects
  29. How to set iframe content of a react component
  30. How should I alternate componentWillMount()?

Leave a Comment