jsx-pascal-in-component.md

Change the first letter of the component to uppercase if it is lowercase. (jsx-pascal)

React components in the "components" or "components" path must be "Pascal case".

This restriction applies only if you are in the "components" and "components" paths. This route will be subject to strong restrictions.

Rule Details

Examples of 🔴 incorrect code for this rule:

const component = () => {};

function component = () => {}

Examples of 🟢 correct code for this rule:

const Component = () => {};

function Component = () => {}

Rule Options

...
"rules": {
  "component/jsx-pascal-in-component": [
    <enabled>,
    { allowAllPaths: <allowAllPaths> }
  ]
}
...

• enabled: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
• allowAllPaths: optional boolean set to true to allow components name in all paths (default to false).

allowAllPaths

🔴 Incorrect

When allowAllPaths is false:

// hocs/Component.jsx

const component = () => {
  return <div>Component</div>;
};

// hocs/Component.jsx

function component() {
  return <div>Component</div>;
}

🟢 Correct

When allowAllPaths is true:

// hocs/Component.jsx

const Component = () => {
  return <div>Component</div>;
};

// hocs/Component.jsx

function Component() {
  return <div>Component</div>;
}

When Not To Use It

If you are not using JSX.