Configurations

ESLint React supports reading settings from the react-x key in the settings object of your ESLint configuration file.

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

Properties

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

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

skipImportCheck

When determining whether an API originates from React, bypass the import source check.

By default, the rule checks only the shape of the API to determine if it is a React API. If skipImportCheck is set to false, both the shape and the import source will be checked.

This prevents false positives when using unrelated third-party libraries that have APIs similar to React.

For example, when skipImportCheck is set to false, the memo function from unrelated-library will not be recognized as React's memo.

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

polymorphicPropName

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

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

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

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" },
            ],
          },
          {
            name: "EmbedContent",
            as: "iframe",
            attributes: [
              { name: "sandbox", defaultValue: "" }
            ],
          },
        ],
      },
    },
  },
];