component-name

Rule category

Convention.

What it does

Enforces naming conventions for components.

Examples

This rule enforces naming conventions for components. Can be used to enforce PascalCase and CONSTANT_CASE. By default, it enforces PascalCase.

Failing

import React from "react";
 
function function Example_Component(): nullExample_Component() {
  //     - Expected component name to be in 'PascalCase'.
  return null;
}

Passing

import React from "react";
 
function function ExampleComponent(): nullExampleComponent() {
  return null;
}

Rule Options

rule: The rule to apply to the file name. Can be one of the following:
1. PascalCase: PascalCase
2. CONSTANT_CASE: CONSTANT_CASE
excepts: List of component names that should be ignored by this rule.

{
  "@eslint-react/naming-convention/component-name": ["warn", "PascalCase"]
}

{
  "@eslint-react/naming-convention/component-name": [
    "warn",
    { "rule": "PascalCase", "excepts": ["MyComponent"] }
  ]
}

hooks-extra/prefer-use-state-lazy-initialization naming-convention/filename