# react/jsx-pascal-case

> Require component names in JSX to be in PascalCase

Components named `UserCard`, `User_Card` and `USERCARD` in one codebase are hard to search for and easy to mix up with constants. This rule wants one style: a capital first letter, no underscores, and at least one lowercase letter or digit.

Tags that start with a lowercase letter are HTML elements, so the rule skips them. One-character names, such as `<T />`, are allowed. In `<Menu.Item />`, the rule checks each part.

{/* 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/jsx-pascal-case" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/jsx-pascal-case" = ["error", {
  allowAllCaps = false,
  allowLeadingUnderscore = false,
  allowNamespace = false,
  ignore = [],
}]
```

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

## Examples

Reported:

{/* bad {"count": 2} */}
```jsx
const page = (
  <User_Card>
    <NAVBAR />
  </User_Card>
);
```

Not reported:

{/* good */}
```jsx
const page = (
  <UserCard>
    <Navbar />
    <H1 />
  </UserCard>
);
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `allowAllCaps` | `false` | Also allow names in capitals, with underscores between words: `<NAV_BAR />`. |
| `allowLeadingUnderscore` | `false` | Allow one underscore before the name: `<_Button />`. |
| `allowNamespace` | `false` | In `<Form.input />`, only check `Form`. |
| `ignore` | `[]` | Names to skip. Globs such as `"*_DEPRECATED"` work. |

{/* good {"options": [{"allowAllCaps": true}]} */}
```jsx
const nav = <NAV_BAR />;
```

{/* bad */}
```jsx
const button = <_Button />;
```

{/* good {"options": [{"allowLeadingUnderscore": true}]} */}
```jsx
const button = <_Button />;
```

{/* bad */}
```jsx
const field = <Form.input />;
```

{/* good {"options": [{"allowNamespace": true}]} */}
```jsx
const field = <Form.input />;
```

{/* good {"options": [{"ignore": ["*_DEPRECATED"]}]} */}
```jsx
const dialog = <Modal_DEPRECATED />;
```