# react/forbid-dom-props

> Disallow the props you choose on DOM elements such as `div`

Some projects don't want certain attributes in their markup. It might be `id`, because two copies of a component would share one, or `style`, because all styling goes through classes. This rule reports the props you list when they're on a DOM element.

The rule does nothing until you add entries to `forbid`. It doesn't check components, which means elements with a capitalized name.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/forbid-dom-props" = "error" # or "warn"
```

Every option, set to its default. The ones that are commented out are unset by default.

```toml bunfig.toml
[lint.rules]
"react/forbid-dom-props" = ["error", {
  # forbid = <list of strings or objects>,
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"options": [{"forbid": ["id"]}]} */}
```jsx
<div id="sidebar" />;
```

Not reported:

{/* good {"options": [{"forbid": ["id"]}]} */}
```jsx
<div className="sidebar" />;

<Sidebar id="main" />;
```

## Options

```toml bunfig.toml
[lint.rules]
"react/forbid-dom-props" = ["error", {
  forbid = ["id", { propName = "style", message = "Use a class" }],
}]
```

`forbid` is the only option. It's a list of prop names or objects, and it's empty by default:

| Key | What it does |
| --- | --- |
| `propName` | The name of the prop. |
| `disallowedFor` | The prop is forbidden on these elements only. Without it, the prop is forbidden on all DOM elements. |
| `disallowedValues` | With an oxlint config, the prop is only forbidden when it has one of these values. Other configs ignore it. |
| `message` | Replaces the report's text. |

{/* bad {"options": [{"forbid": [{"propName": "style", "disallowedFor": ["span"]}]}]} */}
```jsx
<span style={{ color: "red" }}>Error</span>;
```

{/* good {"options": [{"forbid": [{"propName": "style", "disallowedFor": ["span"]}]}]} */}
```jsx
<div style={{ color: "red" }}>Error</div>;
```