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 behavior:

eslint.config.js

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

Properties

Prop

Type

Basic Configuration

`version`

Defines the React version for semantic analysis.

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

`importSource`

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

Example for using @pika/react instead of react:

import React from "@pika/react";

Advanced Configuration

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

`polymorphicPropName`

Defines the prop used for polymorphic components. Helps rules determine element types for semantic context.

Example with polymorphicPropName set to as:

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

`additionalStateHooks`

Regex pattern matching custom hooks treated as state hooks. The string must be a valid JavaScript RegExp with delimiters and flags.

Example to include useMyState and useCustomState:

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

Complete Configuration Example

eslint.config.js

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

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    settings: {
      "react-x": {
        // Basic configuration
        version: "19.2.0", // 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
        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
      },
    },
  },
];

On this page