react/prop-types | Bun Docs

A prop that a component reads but doesn't declare is invisible to anyone who uses the component. Nothing says that it exists, what type it has, or that it was misspelled.

A prop counts as declared if it's in the component's propTypes or in the TypeScript type of its props.

Configure#

Off by default. To turn it on:

bunfig.toml

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

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/prop-types" = ["error", {
  ignore = [], # list of strings
  customValidators = [], # list of strings
  skipUndeclared = false,
}]

Examples#

example.jsx1 problem

function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

example.jsx1 problem

function Profile(props) {
  return <p>{props.name} ({props.age})</p>;
}

Profile.propTypes = {
  name: PropTypes.string.isRequired,
};

example.jsxNo problems

function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

example.tsxNo problems

type Props = { name: string };

function Greeting({ name }: Props) {
  return <h1>Hello {name}</h1>;
}

Options#

Option	Default	What it does
`ignore`	`[]`	Prop names that are never reported.
`customValidators`	`[]`	Names of objects with your own validators, such as `Validators` in `Validators.shape()`. A prop declared with one of them accepts any nested property.
`skipUndeclared`	`false`	Skip components that don't declare any props.

Not reported with ignore: ["children"]:

example.jsxwith { "ignore": ["children"] }No problems

function Card({ children }) {
  return <section>{children}</section>;
}

With skipUndeclared, the first component is skipped. The second one declares its props, so it's still checked:

example.jsxwith { "skipUndeclared": true }1 problem

function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

function Profile({ name, age }) {
  return <p>{name} ({age})</p>;
}

Profile.propTypes = {
  name: PropTypes.string.isRequired,
};

The rule checks a prop's properties against shape(). Here user.name isn't in the shape:

example.jsx1 problem

function Profile({ user }) {
  return <p>{user.name}</p>;
}

Profile.propTypes = {
  user: Validators.shape({ id: PropTypes.number }),
};

Not reported with customValidators: ["Validators"]:

example.jsxwith { "customValidators": ["Validators"] }No problems

function Profile({ user }) {
  return <p>{user.name}</p>;
}

Profile.propTypes = {
  user: Validators.shape({ id: PropTypes.number }),
};

When not to use it#

React 19 ignores propTypes. In a TypeScript project the compiler already rejects a prop that isn't in the type, so this rule adds little there.