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.1.0", // React version for analysis
        // ...other properties
      },
    },
  },
];

Properties

Prop	Type	Default
`additionalHooks?`	`Record<ReactBuiltInHookName, string[]>`	`{}`
`additionalComponents?`	`CustomComponent[]`	`[]`
`polymorphicPropName?`	`string`	`"as"`
`importSource?`	`string`	`"react"`
`version?`	`string`	`"detect"`

Property Specifications

`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";

`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

`additionalComponents` (Experimental)

Consider using polymorphicPropName instead when possible, as it's simpler and more efficient.

Experimental feature that may lack stability and documentation.

Maps components and their attributes for comprehensive analysis. Supports default attribute values.

Example configuration:

[
  {
    "name": "EmbedContent",
    "as": "iframe",
    "attributes": [
      {
        "name": "sandbox",
        "defaultValue": ""
      }
    ]
  }
]

This makes <EmbedContent src="https://eslint-react.xyz" /> evaluate as <iframe src="https://eslint-react.xyz" sandbox="" />.

`additionalHooks` (Experimental)

Intended for edge cases. We suggest to use this option very sparingly, if at all. Generally saying, we recommend most custom Hooks do not vary the built-in React Hooks, and instead provide a higher-level API that is more focused around a specific use case.

Alias variants to built-in React Hooks for rule compatibility:

additionalHooks: {
  useEffect: ["useIsomorphicLayoutEffect"],
  useLayoutEffect: ["useIsomorphicLayoutEffect"]
}

Treats useIsomorphicLayoutEffect as both useEffect and useLayoutEffect in rule checks.

Complete Configuration Example

eslint.config.js

import eslintReact from "@eslint-react/eslint-plugin";
 
export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    settings: {
      "react-x": {
        version: "19.1.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")
        polymorphicPropName: "as", // Define the prop name used for polymorphic components (e.g., <Component as="div">)
 
        // (Experimental) Alias custom Hooks to built-in React Hooks for rule compatibility
        additionalHooks: {
          useEffect: ["useIsomorphicLayoutEffect"],
          useLayoutEffect: ["useIsomorphicLayoutEffect"],
        },
 
        // (Experimental) Configure mapping for custom components and their attributes for more comprehensive analysis
        additionalComponents: [
          {
            name: "Link",
            as: "a",
            attributes: [{ name: "to", as: "href" }],
          },
          {
            name: "EmbedContent",
            as: "iframe",
            attributes: [{ name: "sandbox", defaultValue: "" }],
          },
        ],
      },
    },
  },
];

On this page