Configure Analyzer

ESLint React reads analyzer properties from the react-x key within ESLint's settings object.

You can provide the following properties to customize the analyzer's behavior:

eslint.config.ts

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    settings: {
      "react-x": {
        version: "19.2.4", // React version for analysis
        // ...other properties
      },
    },
  },
];

Basic Configuration

`version`

Defines the React version for semantic analysis.

detect: Auto-detects from project dependencies (defaults to 19.2.4 if undetectable)
string: Explicit version specification (e.g., "18.3.1")

`importSource`

Customizes the import source for React modules. Useful for non-standard React distributions.

Example using @pika/react instead of react:

import React from "@pika/react";

`compilationMode`

Specifies the React Compiler compilationMode used in your React Compiler config.

This allows rules to align their behavior with the React Compiler's optimization strategies. Set this to the same value as your React Compiler config (e.g., "infer", "annotation", "syntax", or "all").

Advanced Configuration

The basic configuration is sufficient for most projects. Over-reliance on advanced configuration options will reduce the portability of your code across different tooling ecosystems.

`polymorphicPropName`

Defines the prop name used for polymorphic components. Helps rules determine the rendered element type.

Example with polymorphicPropName set to as:

<Box as="h3">Hello</Box>
// Evaluated as an h3 element

`additionalStateHooks`

A regex pattern for matching custom hooks that should be treated as state hooks. The value must be a valid JavaScript RegExp string with delimiters and flags.

Example matching useMyState and useCustomState:

additionalStateHooks: "/^(useMyState|useCustomState)$/u",

Basic Configuration Example

eslint.config.ts

import eslintReact from "@eslint-react/eslint-plugin";

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    settings: {
      "react-x": {
        version: "19.2.4", // Specify the React version for semantic analysis (can be "detect" for auto-detection)
        importSource: "react", // Customize the import source for the React module (defaults to "react")
      },
    },
  },
];

Advanced Configuration Example

eslint.config.ts

import eslintReact from "@eslint-react/eslint-plugin";

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    settings: {
      "react-x": {
        version: "19.2.4",
        importSource: "react",
        polymorphicPropName: "as", // Define the prop name used for polymorphic components (e.g., <Component as="div">)
        additionalStateHooks: "/^(useMyState|useCustomState)$/u", // Regex pattern for custom hooks treated as state hooks
      },
    },
  },
];

Advanced Configuration Example with React Compiler

babel.config.ts

export const compilationMode = "annotation";

export default {
  plugins: [
    [
      "babel-plugin-react-compiler", {
        compilationMode
      }
    ]
  ]
};

eslint.config.ts

import eslintReact from "@eslint-react/eslint-plugin";

import { compilationMode } from "./babel.config.ts";

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    settings: {
      "react-x": {
        version: "19.2.4",
        importSource: "react",
        compilationMode, // Use the same compilationMode as the React Compiler config for consistent analysis
        polymorphicPropName: "as",
        additionalStateHooks: "/^(useMyState|useCustomState)$/u",
      },
    },
  },
];

Properties

Basic Configuration

`version`

`importSource`

`compilationMode`

Advanced Configuration

`polymorphicPropName`

`additionalStateHooks`

Basic Configuration Example

Advanced Configuration Example

Advanced Configuration Example with React Compiler

On this page