Prop types

The prop-types package allows us to introduce type-checking during the development runtime of a React application. With larger applications or those with complex data flows, this can help reduce errors and bugs during development. This is a bit like using TypeScript but on a more minimal level.

Install

npm install prop-types

Usage

import PropTypes from "prop-types";

Examples

Say we have a component with the following props:

function Page(props) {
  const classes = useStyles();
  return (
    <React.Fragment>
      <Typography className={classes.heading} variant="h1">
        {props.h1}
      </Typography>
      {props.h2 !== "" && <Typography variant="h2">{props.h2}</Typography>}
      {props.paras.map((paragraph, index) => (
        <Typography
          className={classes.paragraph}
          key={index}
          variant="body1"
          gutterBottom
        >
          {paragraph}
        </Typography>
      ))}
      {props.children}
      <Button
        className={classes.button}
        variant="contained"
        color="primary"
        disableElevation
        component={Link}
        to={props.buttonLink}
      >
        {props.buttonText}
      </Button>
    </React.Fragment>
  );
}

Before the final export default statement, we would add a PropTypes object that specifies the data or reference type that is required by each prop cited in the component:

Page.propTypes = {
  h1: PropTypes.string.isRequired, // should be string data type, must be present
  h2: PropTypes.string, // as above but optional
  paras: PropTypes.array, // should be array reference type
  buttonLink: PropTypes.string,
  buttonText: PropTypes.string,
  children: PropTypes.node, // can be anything (element, type, JSX) that is rendered to the screen
};

If one of these type checks failed you get a very semantic Warning in the console specifying which prop is not consistent with your prop type declaration.

Additional checks

Above are the most frequent and basic checks, but there are many other conditions you can check for:

// The full list of types
[propName]: PropTypes.array,
[propName]: PropTypes.bool,
[propName]: PropTypes.func,
[propName]: PropTypes.number,
[propName]: PropTypes.object,
[propName]: PropTypes.string,
[propName]: PropTypes.symbol,

// Anything that can be rendered: numbers, strings, elements or an arrayor fragment) containing these types.
[propName]: PropTypes.node,

// A function

[propName]: PropTypes.func

// An object that could be one of many types
[objectProp]: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),

// An array of a certain type
[arrayProp]: PropTypes.arrayOf(PropTypes.number),

// An object with property values of a certain type
[objectProp]: PropTypes.objectOf(PropTypes.number),
logo