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>

Configuration

This rule accepts a configuration object with the following properties:

allowAllCaps

type: boolean

default: false

Whether to allow all-caps component names.

allowLeadingUnderscore

type: boolean

default: false

Whether to allow leading underscores in component names.

allowNamespace

type: boolean

default: false

Whether to allow namespaced component names.

ignore

type: string[]

default: []

List of component names to ignore.

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