react/forbid-dom-props

Some projects don't want certain attributes in their markup. It might be id, because two copies of a component would share one, or style, because all styling goes through classes. This rule reports the props you list when they're on a DOM element.

The rule does nothing until you add entries to forbid. It doesn't check components, which means elements with a capitalized name.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/forbid-dom-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-dom-props" = ["error", {
  # forbid = <list of strings or objects>,
}]

Examples#

example.jsxwith { "forbid": ["id"] }1 problem

<div id="sidebar" />;

example.jsxwith { "forbid": ["id"] }No problems

<div className="sidebar" />;

<Sidebar id="main" />;

Options#

bunfig.toml

[lint.rules]
"react/forbid-dom-props" = ["error", {
  forbid = ["id", { propName = "style", message = "Use a class" }],
}]

forbid is the only option. It's a list of prop names or objects, and it's empty by default:

Key	What it does
`propName`	The name of the prop.
`disallowedFor`	The prop is forbidden on these elements only. Without it, the prop is forbidden on all DOM elements.
`disallowedValues`	With an oxlint config, the prop is only forbidden when it has one of these values. Other configs ignore it.
`message`	Replaces the report's text.

example.jsxwith { "forbid": [{ "propName": "style", "disallowedFor": ["span"] }] }1 problem

<span style={{ color: "red" }}>Error</span>;

example.jsxwith { "forbid": [{ "propName": "style", "disallowedFor": ["span"] }] }No problems

<div style={{ color: "red" }}>Error</div>;