propType for accepting a component as a prop?

Question

Given this contrived example, what is the best definition of componentType?

const componentType = PropTypes.oneOfType([
    PropTypes.shape({render: PropTypes.func.isRequired}), // React.createClass / React.Component ...better way to describe?
    PropTypes.func,                                       // Stateless function
    // others?
]);

const Selector = React.createClass({

    propTypes: {
        components: PropTypes.arrayOf(componentType).isRequired,
        index:      PropTypes.number.isRequired,
    },

    render() {
        const Component = this.props.components[this.props.index];
        return (
            <Component />
        );
    }
});

PropTypes.node is not I'm looking for; its usage would look like this:

<Selector components={[<ThingA  />, <ThingB  />]} />

whereas I want something that would look like:

<Selector components={[ThingA, ThingB]} />

I want to pass types, not instances.

Jim Bolla · Accepted Answer · 2015-10-20T17:53:56.227

14

I crossposted to github and got this answer. So it should be:

const componentType = PropTypes.oneOfType([PropTypes.string, PropTypes.func])

func covers types from "classic" react components, ES6 classes, and stateless function components. string covers the native element case (eg "div").

edited Oct 20 '15 at 17:53

answered Oct 12 '15 at 18:11

Jim Bolla

8,265
36
54

score 4 · Answer 2 · answered Sep 02 '20 at 21:18

4

This seems to be most up to date: https://stackoverflow.com/a/55784547/4993912

TLDR;

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

answered Sep 02 '20 at 21:18

madav

2,918
1
13
17

score -1 · Answer 3 · answered Oct 12 '15 at 18:04

-1

youre looking for a combination of arrayOf and element. the list of propTypes can be found on the Reusable Components page of the docs.

I'd expect it would look something like this:

components: React.PropTypes.arrayOf(React.PropTypes.element)

answered Oct 12 '15 at 18:04

PhilVarg

4,762
2
19
37

score -1 · Answer 4 · answered Feb 04 '19 at 20:21

This is how react-router handles it here:

import React from "react";
import { isValidElementType } from "react-is";

Route.propTypes = {
    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
    component: (props, propName) => {
      if (props[propName] && !isValidElementType(props[propName])) {
        return new Error(
          `Invalid prop 'component' supplied to 'Route': the prop is not a valid React component`
        );
      }
    },
    exact: PropTypes.bool,
    location: PropTypes.object,
    path: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.arrayOf(PropTypes.string)
    ]),
    render: PropTypes.func,
    sensitive: PropTypes.bool,
    strict: PropTypes.bool
  };

propType for accepting a component as a prop?

4 Answers4