Search code examples
javascriptreactjsreact-props

React propTypes component class?


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}/>
        );
    }
}

Solution

  • 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,
    };