Configurations

A configuration object is used to configure the behavior of the rules in ESLint React. You can define the settings object in the settings["react-x"] field of your ESLint configuration file.

eslint.config.js

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

Properties

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

Descriptions

`version`

React version to perform the analysis, "detect" means auto detect React version from the project's dependencies.

If failed to detect, it will use the 19.0.0 version.

`importSource`

If importSource is specified, an equivalent version of React should be provided to the version setting.

The source where React is imported from.

This allows to specify a custom import location for React when not using the official distribution.

For example, if you are using @pika/react instead of react, you can set the importSource to @pika/react:

import React from "@pika/react";

`strictImportCheck`

Check both the shape and the import to determine if a API is from React before applying the rules.

This can prevent false positives when using a irrelevant third-party library that has similar APIs to React.

For example, if you set the strictImportCheck to true, then the memo function from irrelevant-library will not be recognized as React's memo:

import { memo } from "irrelevant-library";
 
const NonComponentFunction = memo(() => {
  //                         ^^^^
  //                         - This will not be recognized as React's memo
});

You can optionally use the polymorphicPropName setting to define the prop your code uses to create polymorphic components. This setting will be used determine the element type in rules that require semantic context.

For example, if you set the polymorphicPropName setting to as then this element:

<Box as="h3">Configurations</Box>

will be evaluated as an h3.

If no polymorphicPropName is set, then the component will be evaluated as Box.

`additionalComponents`

Before using additionalComponents, consider whether polymorphicPropName can be used instead, as it simpler and more efficient.

This is an experimental feature that can be unstable and lacks documentation.

An array of components and its attributes mapping. It allows the related rules to do even more comprehensive analysis. You can also provide default values for attributes here, that will be used when that attribute is not present.

For example, if you set the additionalComponents to:

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

then this element:

<EmbedContent src="https://eslint-react.xyz" />

will be evaluated as an:

<iframe src="https://eslint-react.xyz" sandbox="" />

So that both the dom/no-missing-iframe-sandbox and dom/no-unsafe-iframe-sandbox rules can perform checks on it.

`additionalHooks`

This is intended to cover edge cases. We suggest using the built-in React Hooks whenever possible.

A object of aliases for React built-in Hooks. ESLint React will recognize these aliases as equivalent to the built-in Hooks in all its rules.

For example, if you set the additionalHooks to:

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

then the React Hook call:

useIsomorphicLayoutEffect(() => { setCount(count => count + 1); }, []);

will be evaluated as:

useEffect(() => { setCount(count => count + 1); }, []);

and:

useLayoutEffect(() => { setCount(count => count + 1); }, []);

So that both the hooks-extra/no-direct-set-state-in-use-effect and hooks-extra/no-direct-set-state-in-use-layout-effect rules can perform checks on it.

Examples