AphrodyBun GitHub

Runtime docs · Linter · Rules

react/forbid-prop-types

Disallow vague prop types such as any, array, and object

PropTypes.any, PropTypes.array, and PropTypes.object check almost nothing. users: PropTypes.array accepts an array of anything, so React never warns about a bad item. arrayOf, objectOf, and shape say what's inside.

Configure

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/forbid-prop-types" = "error" # or "warn"

Every option, set to its default:

bunfig.toml
[lint.rules]
"react/forbid-prop-types" = ["error", {
  forbid = ["any", "array", "object"],
  checkContextTypes = false,
  checkChildContextTypes = false,
}]

Examples

Reported:

import PropTypes from "prop-types";

function UserList({ users }) {
  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

UserList.propTypes = {
  users: PropTypes.array.isRequired,
};

The rule also looks inside shape({ ... }) and at the arguments of a prop type:

import PropTypes from "prop-types";

function Card({ tags, owner }) {
  return <div title={owner.name}>{tags.length}</div>;
}

Card.propTypes = {
  tags: PropTypes.arrayOf(PropTypes.object),
  owner: PropTypes.shape({ name: PropTypes.any }),
};

Not reported:

import PropTypes from "prop-types";

function UserList({ users }) {
  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

UserList.propTypes = {
  users: PropTypes.arrayOf(
    PropTypes.shape({ id: PropTypes.number, name: PropTypes.string }),
  ).isRequired,
};

Options

OptionDefaultWhat it does
forbid["any", "array", "object"]The prop types to report. Your list replaces the default one.
checkContextTypesfalseAlso check contextTypes.
checkChildContextTypesfalseAlso check childContextTypes.

With forbid: ["any"], object is allowed and any is still reported:

import PropTypes from "prop-types";

function Card({ style, extra }) {
  return <div style={style}>{extra}</div>;
}

Card.propTypes = {
  style: PropTypes.object,
  extra: PropTypes.any,
};
import PropTypes from "prop-types";

function Title(props, context) {
  return <h1 style={context.theme}>{props.text}</h1>;
}

Title.contextTypes = {
  theme: PropTypes.object,
};

When not to use it

React 19 ignores propTypes. If you type your props with TypeScript instead, you don't need this rule.