---
url: /docs/guide/usage/linter/rules/react/forbid-component-props.md
---

### 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:

```jsx
<Hello className='foo' />
<Hello style={{color: 'red'}} />
```

Examples of **correct** code for this rule:

```jsx
<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

## Version

This rule was added in v1.62.0.

## References