)))
- Universal solution based solely on ESLint.

---

Installation

Install the package using npm or yarn:

``bash
npm install eslint-plugin-react-component-name --save-dev
`

Usage

Add the plugin to your .eslintrc configuration:

`json
{
"plugins": ["react-component-name"],
"extends": ["plugin:react-component-name/recommended"]
}
`

You can change the default rule setting (memo, forwardRef) by adding targets option in the rules section.

Also, if you are using "prefer-arrow-callback" rule, it is required to add allowNamedFunctions option to it.

`json
{
"plugins": ["react-component-name"],
"rules": {
"prefer-arrow-callback": ["error", { "allowNamedFunctions": true }],

"react-component-name/react-component-name": [
"error",
{
"targets": ["memo", "forwardRef", "observer"]
}
]
}
}
`

Examples

$3

`javascript
const MyComponent = memo(() => {
return

;
});

const MyRef = forwardRef((props, ref) => {
return ;
});
`

$3

`javascript
const MyComponent = memo(function MyComponent() {
return

;
});

const MyRef = forwardRef(function MyRef(props, ref) {
return ;
});
`

Motivation

When developing React applications, maintaining clean, readable, and consistent code is critical. One common area where issues arise is with the displayName property in React components. While the default ESLint rules for React provide checks for the presence of a displayName, they lack an autofix feature, leaving developers to manually resolve violations. This process can be tedious and error-prone, especially in large codebases with numerous components.

Although some modern bundlers offer support for automatic inlining of the displayName property, this solution is far from universal. The implementation of this feature varies between bundlers, and not all developers or teams can rely on it due to compatibility constraints or specific project configurations. In contrast, ESLint rules have the advantage of being framework-agnostic and widely adopted, making them a more universally accessible solution.

Additionally, we aim to support all types of component decorators, such as observer from the mobx-react library or reatomComponent from the @reatom/npm-react package. These decorators are commonly used in React projects to enhance components with additional functionality, and it is crucial that any solution works seamlessly with them. Moreover, it is necessary to handle nested decorators, like wrapping a component with both memo and forwardRef, for example, memo(forwardRef(() =>