Configurations

ESLint React provides the following configurations:

Settings

`importSource`

(type: string, default: "react")

The source where React is imported from.
This allows to specify a custom import location for React when not using the official distribution.

(e.g. @pika/react, etc)

`version`

(type: string, default: "detect")

React version to use, "detect" means auto detect React version from the project’s dependencies.
If importSource is specified, an equivalent version of React should be provided here.

`polymorphicPropName`

(type: string)

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.

`additionalHooks`

(type: [key: string]: string[])

⚠️

This is intended to cover edge cases. We suggest to use this option very sparingly, if at all.

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.

(e.g. { useLayoutEffect: ["useIsomorphicLayoutEffect"] })

`additionalComponents`

(type: { name: string; as: string; attributes: { name: string; as?: string; defaultValue?: string }[] }[])

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 on them than just using the polymorphicPropName setting. You can also provide default values for attributes here, that will be used when that attribute is not present in the component.

(e.g. The [{ name: "EmbedContent", as: "iframe", attributes: [{ name: "sandbox", defaultValue: "" }] }] demystifies an <EmbedContent src="https://eslint-react.xyz" /> 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)

Examples

eslint.config.js

import eslintReact from "@eslint-react/eslint-plugin";
 
export default [
  // ...
  {
    files: ["**/*.{ts,tsx}"],
    ...eslintReact.configs.recommended,
    settings: {
      "react-x": {
        additionalHooks: {
          useLayoutEffect: ["useIsomorphicLayoutEffect"],
        },
        additionalComponents: [
          {
            name: "Link",
            as: "a",
            attributes: [
              { name: "to", as: "href" },
              { name: "rel", defaultValue: "noopener noreferrer" },
            ],
          },
        ],
        version: "detect",
      },
    },
  },
];

Presets FAQ