react/forbid-dom-props Restriction
What it does
This rule prevents passing of props to elements. This rule only applies to DOM Nodes (e.g.
) and not Components (e.g. ). The list of forbidden props can be customized with the forbid option.Why is this bad?
This rule checks all JSX elements and verifies that no forbidden props are used on DOM Nodes. This rule is off by default.
Examples
Examples of incorrect code for this rule:
// [1, { "forbid": ["id"] }]
<div id='Joe' />
// [1, { "forbid": ["style"] }]
<div style={{color: 'red'}} />Examples of correct code for this rule:
// [1, { "forbid": ["id"] }]
<Hello id='foo' />
// [1, { "forbid": ["id"] }]
<Hello id={{color: 'red'}} />Configuration
Configuration for the forbid-dom-props rule.
This rule accepts a configuration object with the following properties:
forbid
type: array
An array of prop names or objects that are forbidden on DOM elements.
Each array element can be a string with the property name, or an object with propName, an optional disallowedFor array of DOM node names, and an optional custom message.
Examples:
["error", { "forbid": ["id", "style"] }]["error", { "forbid": [{ "propName": "className", "message": "Use class instead" }] }]["error", { "forbid": [{ "propName": "style", "disallowedFor": ["div", "span"] }] }]
forbid[n]
type: string
A forbidden prop, either as a plain prop name string or with options.
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/forbid-dom-props": "error"
}
}oxlint --deny react/forbid-dom-props --react-plugin