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'}} />

Options

forbid

An array of strings, with the names of props that are forbidden. The default value of this option []. Each array element can either be a string with the property name or object specifying the property name, an optional custom message, and a DOM nodes disallowed list (e.g.

)

{"propName": "someProp", "disallowedFor": ["DOMNode", "AnotherDOMNode"], "message": "Avoid using someProp" }

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/forbid-dom-props --react-plugin

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/forbid-dom-props": "error"
  }
}

References

• Rule Source