forbid-component-props.md

Disallow certain props on components (react/forbid-component-props)

By default this rule prevents passing of props that add lots of complexity (className, style) to Components. This rule only applies to Components (e.g. <Foo />) and not DOM nodes (e.g. <div />). The list of forbidden props can be customized with the forbid option.

Rule Details

This rule checks all JSX elements and verifies that no forbidden props are used on Components. This rule is off by default.

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

Rule Options

...
"react/forbid-component-props": [<enabled>, { "forbid": [<string>|<object>] }]
...

forbid

An array specifying the names of props that are forbidden. The default value of this option is ['className', 'style']. Each array element can either be a string with the property name or object specifying the property name or glob string, an optional custom message, and a component allowlist:

{
  "propName": "someProp",
  "allowedFor": ["SomeComponent", "AnotherComponent"],
  "message": "Avoid using someProp except SomeComponent and AnotherComponent"
}

Use disallowedFor as an exclusion list to warn on props for specific components. disallowedFor must have at least one item.

{
  "propName": "someProp",
  "disallowedFor": ["SomeComponent", "AnotherComponent"],
  "message": "Avoid using someProp for SomeComponent and AnotherComponent"
}

For propNamePattern glob string patterns:

{
  "propNamePattern": '**-**',
  "allowedFor": ['div'],
  "message": "Avoid using kebab-case except div"
}

{
  "propNamePattern": '**-**',
  "allowedForPatterns": ["*Component"],
  "message": "Avoid using kebab-case except components that match the `*Component` pattern"
}

Use allowedForPatterns for glob string patterns:

{
  "propName": "someProp",
  "allowedForPatterns": ["*Component"],
  "message": "Avoid using `someProp` except components that match the `*Component` pattern"
}

Use disallowedForPatterns for glob string patterns:

{
  "propName": "someProp",
  "disallowedForPatterns": ["*Component"],
  "message": "Avoid using `someProp` for components that match the `*Component` pattern"
}

Combine several properties to cover more cases:

{
  "propName": "someProp",
  "allowedFor": ['div'],
  "allowedForPatterns": ["*Component"],
  "message": "Avoid using `someProp` except `div` and components that match the `*Component` pattern"
}

Related rules

• forbid-dom-props