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:

[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.

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

Examples

Reported:

<div id="sidebar" />;

Not reported:

<div className="sidebar" />;

<Sidebar id="main" />;

Options

[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.

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

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