eslint-plugin-react-displayname

Installation

yarn add --dev eslint-plugin-react-displayname

npm install --save-dev eslint-plugin-react-displayname

Usage

Add no-different-displayname to the plugins section of your ESLint configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["no-different-displayname"]
}

Then, enable the rule under the rules section.

{
  "rules": {
    "no-different-displayname": "error"
  }
}

Rule Details

This rule enforces that the displayName of a React component matches the component's name.

Examples of incorrect code for this rule :

Examples

const MyComponent = () => {
  /* ... */
};

MyComponent.displayName = "NotMyComponent";

After autofix:

const MyComponent = () => {
  /* ... */
};

MyComponent.displayName = "MyComponent";