Change propTypes component class?

Question

How can I verify that the supplied support is a component class (and not an instance)?

eg.

export default class TimelineWithPicker extends React.PureComponent { static propTypes = { component: PropTypes.any, // <-- how can I validate that this is a component class (or stateless functional component)? }; render() { return ( <this.props.component {...this.props} start={this.state.start}/> ); } } 

Answer 1

EDIT: Added a React FancyButton example for codesandbox, as well as a custom prop check function that works with the new React.forwardRef API in React 16.3. The React.forwardRef API returns an object with a render function. I use the following special check to confirm this type. - Thank you for Ivan Samovar for noticing this need.

 FancyButton: function (props, propName, componentName) { if(!props[propName] || typeof(props[propName].render) != 'function') { return new Error('${propName}.render must be a function!'); } } 

Do you want to use PropTypes.element Actually ... PropType.func works both for stateless functional components and for class components.

I made a sandbox to prove that it works ... I thought it was necessary, given that at first I gave you the wrong information. I am very sorry about that!

An example of a working sandbox !

Here is the code to test in case the link doesn't work:

 import React from 'react'; import { render } from 'react-dom'; import PropTypes from "prop-types"; class ClassComponent extends React.Component { render() { return <p>I'm a class component</p> } } const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>; const FSComponent = () => ( <p>I'm a functional stateless component</p> ); const Test = ({ ClassComponent, FSComponent, FancyButton }) => ( <div> <ClassComponent /> <FSComponent /> <FancyButton /> </div> ); Test.propTypes = { ClassComponent: PropTypes.func.isRequired, FSComponent: PropTypes.func.isRequired, FancyButton: function (props, propName, componentName) { if(!props[propName] || typeof(props[propName].render) != 'function') { return new Error('${propName}.render must be a function!'); } }, } render(<Test ClassComponent={ ClassComponent } FSComponent={ FSComponent } FancyButton={ FancyButton } />, document.getElementById('root')); 

Answer 2

For those using PropTypes >= 15.7.0 , a new PropTypes.elementType released on February 10, 2019 in this add request .

This type of support supports all components (native components, stateless components, state components, React.forwardRef direct links, context providers / consumers).

And it gives a warning when there is none of these elements, it also gives a warning when the missed propeller is an element ( PropTypes.element ) and not a type.

Finally, you can use it like any other type of prop:

 const propTypes = { component: PropTypes.elementType, requiredComponent: PropTypes.elementType.isRequired, };