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
| Option | Default | What it does |
|---|---|---|
forbid | ["any", "array", "object"] | The prop types to report. Your list replaces the default one. |
checkContextTypes | false | Also check contextTypes. |
checkChildContextTypes | false | Also 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.