react/forbid-component-props

A component that accepts className or style lets every caller restyle it, and soon no two uses look the same. This rule reports those props on components, so callers change the look through props the component defines, such as variant or size.

The rule only checks components, which means elements with a capitalized name. It skips DOM elements such as <div>.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/forbid-component-props" = "error" # or "warn"

Every option, set to its default. The ones that are commented out are unset by default.

bunfig.toml

[lint.rules]
"react/forbid-component-props" = ["error", {
  # forbid = <list of strings or objects>,
}]

Examples#

example.jsx2 problems

<Button className="wide" style={{ color: "red" }}>
  Delete
</Button>;

example.jsxNo problems

<Button size="wide" variant="danger">
  Delete
</Button>;

<div className="toolbar" />;

Options#

bunfig.toml

[lint.rules]
"react/forbid-component-props" = ["error", {
  forbid = ["style", { propName = "className", allowedFor = ["Icon"] }],
}]

forbid is the only option. It's a list of prop names or objects, and it replaces the default ["className", "style"]:

Key	What it does
`propName`	The name of the prop.
`propNamePattern`	Use this instead of `propName` to match names with a glob, such as `"data-*"`.
`allowedFor`	Components that can have the prop. It's forbidden on all others.
`allowedForPatterns`	The same, as globs that match the component's name.
`disallowedFor`	The prop is forbidden on these components only.
`disallowedForPatterns`	The same, as globs.
`message`	Replaces the report's text.

An entry can have the allowed.. keys or the disallowed.. keys, but not both.

example.jsxwith { "forbid": [{ "propName": "className", "allowedFor": ["Icon"] }] }No problems

<Icon className="spin" />;

example.jsxwith { "forbid": [{ "propName": "className", "allowedFor": ["Icon"] }] }1 problem

<Button className="wide" />;

example.jsxwith { "forbid": [{ "propName": "style", "disallowedForPatterns": ["*Button"] }] }1 problem

<IconButton style={{ margin: 4 }} />;

example.jsxwith { "forbid": [{ "propName": "style", "disallowedForPatterns": ["*Button"] }] }No problems

<Card style={{ margin: 4 }} />;

example.jsxwith { "forbid": [{ "propNamePattern": "data-*", "message": "Use the testId prop" }] }1 problem

<Button data-testid="save" />;