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 of incorrect code for this rule:
<Test_component />
<TEST_COMPONENT />
Examples of correct code for this rule:
<div />
<TestComponent />
<TestComponent>
<div />
</TestComponent>
<CSSTransitionGroup />
...
"react/jsx-pascal-case": [<enabled>, { allowAllCaps: <allowAllCaps>, allowNamespace: <allowNamespace>, allowLeadingUnderscore: <allowLeadingUnderscore>, ignore: <ignore> }]
...
enabled
: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.allowAllCaps
: optional boolean set totrue
to allow components name in all caps (default tofalse
).allowLeadingUnderscore
: optional boolean set totrue
to allow components name with that starts with an underscore (default tofalse
).allowNamespace
: optional boolean set totrue
to ignore namespaced components (default tofalse
).ignore
: optional string-array of component names to ignore during validation (supports minimatch-style globs).
Examples of correct code for this rule, when allowAllCaps
is true
:
<ALLOWED />
<TEST_COMPONENT />
Examples of correct code for this rule, when allowNamespace
is true
:
<Allowed.div />
<TestComponent.p />
Examples of correct code for this rule, when allowLeadingUnderscore
is true
:
<_AllowedComponent />
<_AllowedComponent>
<div />
</_AllowedComponent>
WARNING: Adding a leading underscore to the name of a component does NOT affect the visibilty or accessibility of that component. Attempting to use leading underscores to enforce privacy of your components is an error.
If you are not using JSX.