logoESLint React
Rules

component-name

Full Name in eslint-plugin-react-naming-convention

react-naming-convention/component-name

Full Name in @eslint-react/eslint-plugin

@eslint-react/naming-convention/component-name

Features

⚙️

Description

Enforces naming conventions for components.

Examples

Failing

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

Passing

import React from "react";
 
function MyComponent() {
  return null;
}

Rule Options

  • rule: The rule to apply to the component name. Possible values:
    • PascalCase (default)
    • CONSTANT_CASE
  • excepts: (optional) An array of component names that are allowed to not follow the rule.
  • allowAllCaps: (optional) If true, allows all caps component names. Default is false.

Rule Options Examples

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

Implementation


See Also

  • context-name
    Enforces context name to be a valid component name with the suffix Context.

On this page