react/forbid-component-props Restriction
What it does
This rule prevents passing of props to components. This rule only applies to Components (e.g. <Foo />) and not DOM nodes (e.g. <div />). By default this rule prevents passing of props that add lots of complexity (className, style) to Components. 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 components. This rule is off by default.
Examples
Examples of incorrect code for this rule:
<Hello className='foo' />
<Hello style={{color: 'red'}} />Examples of correct code for this rule:
<Hello name='Joe' />
<div className='foo' />
<div style={{color: 'red'}} />Configuration
This rule accepts a configuration object with the following properties:
forbid
type: array
An array specifying the names of props that are forbidden.
The default value is ["className", "style"].
Each array element can be a string with the property name, or an object with propName / propNamePattern, allowedFor / allowedForPatterns, disallowedFor / disallowedForPatterns, optional custom message
Pattern matching: Uses glob patterns to match prop names and component names. For example, a propNamePattern of "**-**" would match any prop name that contains a hyphen, and an allowedForPatterns entry of "*Icon" would match component names like SomeIcon and AnotherIcon. Note that the pattern matching is done in Rust with the fast-glob library, and so may differ from the JavaScript glob library used by the original ESLint rule.
Examples:
["error", { "forbid": ["className", "style"] }]["error", { "forbid": [{ "propName": "className", "message": "Use variant instead" }] }]["error", { "forbid": [{ "propName": "className", "allowedFor": ["ReactModal"] }] }]["error", { "forbid": [{ "propNamePattern": "**-**", "disallowedFor": ["Foo"] }] }]
forbid[n]
type: object | string
A forbidden prop, either as a plain prop name string or with options.
forbid[n].allowedFor
type: string[]
default: []
Component names for which this prop is allowed (all others are forbidden).
forbid[n].allowedForPatterns
type: string[]
default: []
Glob patterns for component names where the prop is allowed.
forbid[n].disallowedFor
type: string[]
default: []
Component names for which this prop is disallowed (all others are allowed).
forbid[n].disallowedForPatterns
type: string[]
default: []
Glob patterns for component names where the prop is disallowed.
forbid[n].message
type: string
Custom message to display.
forbid[n].propName
type: string
Exact prop name to forbid.
forbid[n].propNamePattern
type: string
Glob pattern to match prop names against.
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/forbid-component-props": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/forbid-component-props": "error",
},
});oxlint --deny react/forbid-component-props --react-pluginVersion
This rule was added in v1.62.0.