react/jsx-pascal-case Style

What it does

Enforce PascalCase for user-defined JSX components

Why is this bad?

It enforces coding style that user-defined JSX components are defined and referenced in PascalCase. Note that since React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags this rule will not warn on components that start with a lower case letter.

Examples

Examples of incorrect code for this rule:

<Test_component />
<TEST_COMPONENT />

Examples of correct code for this rule:

<div />

<TestComponent />

<TestComponent>
    <div />
</TestComponent>

<CSSTransitionGroup />

Examples of correct code for the "allowAllCaps" option:

<ALLOWED />

<TEST_COMPONENT />

Examples of correct code for the "allowNamespace" option:

<Allowed.div />

<TestComponent.p />

Examples of correct code for the "allowLeadingUnderscore" option:

<_AllowedComponent />

<_AllowedComponent>
    <div />
</_AllowedComponent>

Options

allowAllCaps

{ type: boolean, default: false }

Optional boolean set to true to allow components name in all caps

allowLeadingUnderscore

{ type: boolean, default: false }

Optional boolean set to true to allow components name with that starts with an underscore

allowNamespace

{ type: boolean, default: false }

Optional boolean set to true to ignore namespaced components

ignore

{ type: Array<string | RegExp>, default: [] }

Optional string-array of component names to ignore during validation

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/jsx-pascal-case --react-plugin

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-pascal-case": "error"
  }
}

References

• Rule Source