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. <div />) and not Components (e.g. <Component />). 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, optional disallowedFor and disallowedValues arrays, 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"] }] }]["error", { "forbid": [{ "propName": "type", "disallowedValues": ["button"] }] }]
forbid[n]
type: object | string
A forbidden prop, either as a plain prop name string or with options.
forbid[n].disallowedFor
type: string[]
A list of DOM element names (e.g. ["div", "span"]) on which this prop is forbidden. If empty or omitted, the prop is forbidden on all DOM elements.
forbid[n].disallowedValues
type: string[]
A list of string literal values for which this prop is forbidden. If omitted, the prop is forbidden for all values.
forbid[n].message
type: string
A custom message to display when this prop is used.
forbid[n].propName
type: string
The name of the prop to forbid.
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"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/forbid-dom-props": "error",
},
});oxlint --deny react/forbid-dom-props --react-pluginVersion
This rule was added in v1.24.0.