Configurations

ESLint React reads configurations from the react-x key within ESLint's settings object. Configure these properties in your ESLint configuration file:

eslint.config.js

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

Configuration Properties

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

Property Specifications

`version`

Defines the React version for semantic analysis.

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

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

`skipImportCheck`

Controls whether to verify the import source when identifying React APIs.

Default is true (checks only API shape). When false, both shape and import source are verified, preventing false positives from third-party libraries with similar APIs.

import { memo } from "unrelated-library";
 
const NonComponentFunction = memo(() => {
  // When skipImportCheck: false, this isn't recognized as React's memo
});

`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">Configurations</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}"],
    ...eslintReact.configs["recommended-typescript"],
    settings: {
      "react-x": {
        version: "19.0.0",
        importSource: "react",
        polymorphicPropName: "as",
        additionalHooks: {
          useEffect: ["useIsomorphicLayoutEffect"],
          useLayoutEffect: ["useIsomorphicLayoutEffect"]
        },
        additionalComponents: [
          {
            name: "Link",
            as: "a",
            attributes: [
              { name: "to", as: "href" }  // Maps 'to' prop to 'href' attribute
            ]
          },
          {
            name: "EmbedContent",
            as: "iframe",
            attributes: [
              { name: "sandbox", defaultValue: "" }
            ]
          }
        ]
      }
    }
  }
];

On this page