react/jsx-pascal-case

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.

Configure

Off by default. To turn it on:

[lint.rules]
"react/jsx-pascal-case" = "error" # or "warn"

Every option, set to its default:

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

Examples

Reported:

const page = (
  <User_Card>
    <NAVBAR />
  </User_Card>
);

Not reported:

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.

const nav = <NAV_BAR />;

const button = <_Button />;

const button = <_Button />;

const field = <Form.input />;

const field = <Form.input />;

const dialog = <Modal_DEPRECATED />;