React propTypes component class?

mpen picture mpen · Jul 26, 2017 · Viewed 24.3k times · Source

How can I validate that the supplied prop is a component class (not instance)?

e.g.

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

Jose Da Silva picture Jose Da Silva · Apr 21, 2019

For anyone using PropTypes >= 15.7.0 a new PropTypes.elementType was added in this pull request and was released on february 10, 2019.

This prop type supports all components (native components, stateless components, stateful components, forward refs React.forwardRef, context providers/consumers).

And it throws a warning when is not any of those elements, it also throws a warning when the prop passed is an element (PropTypes.element) and not a type.

Finally you can use it like any other prop type:

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