Documentation
Configuration

Configuration

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).

jsxPragma

(type: string, default: "createElement")

The identifier that’s used for JSX Element creation.
This should not be a member expression (i.e. use "createElement" instead of "React.createElement").

jsxPragmaFrag

(type: string, default: "Fragment")

The identifier that’s used for JSX fragment elements.
This should not be a member expression (i.e. use "Fragment" instead of "React.Fragment").

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.

additionalHooks

(type: [key: string]: string[], default: {})

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.
This is intended to cover edge cases. We suggest to use this option very sparingly, if at all.
(e.g. { useLayoutEffect: ["useIsomorphicLayoutEffect"] }).

additionalComponents (experimental)

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

An array of user-defined components, used to inform the ESLint React plugins how to treat these components during checks.
This is intended to cover edge cases. We suggest to use this option very sparingly, if at all.

Examples

eslint.config.js
// ...
import 
const react: {
    readonly meta: {
        readonly name: string;
        readonly version: string;
    };
    readonly configs: {
        readonly all: {
            readonly plugins: {
                readonly "@eslint-react": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-x/dist/index");
                readonly "@eslint-react/debug": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-debug/dist/index");
                readonly "@eslint-react/dom": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-dom/dist/index");
                readonly "@eslint-react/hooks-extra": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-hooks-extra/dist/index");
                readonly "@eslint-react/naming-convention": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-naming-convention/dist/index");
            };
            readonly rules: {
                readonly "@eslint-react/avoid-shorthand-boolean": "warn";
                readonly "@eslint-react/avoid-shorthand-fragment": "warn";
                readonly "@eslint-react/ensure-forward-ref-using-ref": "warn";
                readonly "@eslint-react/no-access-state-in-setstate": "error";
                readonly "@eslint-react/no-array-index-key": "warn";
                readonly "@eslint-react/no-children-count": "warn";
                readonly "@eslint-react/no-children-for-each": "warn";
                readonly "@eslint-react/no-children-map": "warn";
                readonly "@eslint-react/no-children-only": "warn";
                readonly "@eslint-react/no-children-prop" ...
react from "@eslint-react/eslint-plugin";
 
// ...
export default [
  // ...
  {
    files: string[]files: ["**/*.{ts,tsx}"],
    ...
const react: {
    readonly meta: {
        readonly name: string;
        readonly version: string;
    };
    readonly configs: {
        readonly all: {
            readonly plugins: {
                readonly "@eslint-react": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-x/dist/index");
                readonly "@eslint-react/debug": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-debug/dist/index");
                readonly "@eslint-react/dom": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-dom/dist/index");
                readonly "@eslint-react/hooks-extra": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-hooks-extra/dist/index");
                readonly "@eslint-react/naming-convention": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-naming-convention/dist/index");
            };
            readonly rules: {
                readonly "@eslint-react/avoid-shorthand-boolean": "warn";
                readonly "@eslint-react/avoid-shorthand-fragment": "warn";
                readonly "@eslint-react/ensure-forward-ref-using-ref": "warn";
                readonly "@eslint-react/no-access-state-in-setstate": "error";
                readonly "@eslint-react/no-array-index-key": "warn";
                readonly "@eslint-react/no-children-count": "warn";
                readonly "@eslint-react/no-children-for-each": "warn";
                readonly "@eslint-react/no-children-map": "warn";
                readonly "@eslint-react/no-children-only": "warn";
                readonly "@eslint-react/no-children-prop" ...
react.
configs: {
    readonly all: {
        readonly plugins: {
            readonly "@eslint-react": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-x/dist/index");
            readonly "@eslint-react/debug": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-debug/dist/index");
            readonly "@eslint-react/dom": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-dom/dist/index");
            readonly "@eslint-react/hooks-extra": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-hooks-extra/dist/index");
            readonly "@eslint-react/naming-convention": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-naming-convention/dist/index");
        };
        readonly rules: {
            readonly "@eslint-react/avoid-shorthand-boolean": "warn";
            readonly "@eslint-react/avoid-shorthand-fragment": "warn";
            readonly "@eslint-react/ensure-forward-ref-using-ref": "warn";
            readonly "@eslint-react/no-access-state-in-setstate": "error";
            readonly "@eslint-react/no-array-index-key": "warn";
            readonly "@eslint-react/no-children-count": "warn";
            readonly "@eslint-react/no-children-for-each": "warn";
            readonly "@eslint-react/no-children-map": "warn";
            readonly "@eslint-react/no-children-only": "warn";
            readonly "@eslint-react/no-children-prop": "warn";
            readonly "@eslint-react/no-children-to-array": "warn";
            readonly "@eslint-react/no-class-component": "warn";
            readonly "@eslint-react/no-clone-element" ...
configs.
recommended: {
    readonly plugins: {
        readonly "@eslint-react": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-x/dist/index");
        readonly "@eslint-react/debug": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-debug/dist/index");
        readonly "@eslint-react/dom": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-dom/dist/index");
        readonly "@eslint-react/hooks-extra": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-hooks-extra/dist/index");
        readonly "@eslint-react/naming-convention": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-naming-convention/dist/index");
    };
    readonly rules: {
        readonly "@eslint-react/ensure-forward-ref-using-ref": "warn";
        readonly "@eslint-react/no-access-state-in-setstate": "error";
        readonly "@eslint-react/no-array-index-key": "warn";
        readonly "@eslint-react/no-children-count": "warn";
        readonly "@eslint-react/no-children-for-each": "warn";
        readonly "@eslint-react/no-children-map": "warn";
        readonly "@eslint-react/no-children-only": "warn";
        readonly "@eslint-react/no-children-to-array": "warn";
        readonly "@eslint-react/no-clone-element": "warn";
        readonly "@eslint-react/no-comment-textnodes": "warn";
        readonly "@eslint-react/no-component-will-mount": "error";
        readonly "@eslint-react/no-component-will-receive-props": "error";
        readonly "@eslint-react/no-component-will-update": "error";
        readonly "@eslint-react/no-create-ref": "error"; ...
recommended,
    
settings: {
    "react-x": {
        importSource: string;
        jsxPragma: string;
        jsxPragmaFrag: string;
        additionalHooks: {
            useLayoutEffect: string[];
        };
        additionalComponents: {
            name: string;
            as: string;
            attributes: ({
                name: string;
                as: string;
            } | {
                ...;
            })[];
        }[];
        version: string;
    };
}
settings: {
      "react-x": {
        importSource: stringimportSource: "react",
        jsxPragma: stringjsxPragma: "createElement",
        jsxPragmaFrag: stringjsxPragmaFrag: "Fragment",
        
additionalHooks: {
    useLayoutEffect: string[];
}
additionalHooks: {
          useLayoutEffect: string[]useLayoutEffect: ["useIsomorphicLayoutEffect"],
          // ...
        },
        
additionalComponents: {
    name: string;
    as: string;
    attributes: ({
        name: string;
        as: string;
    } | {
        name: string;
        defaultValue: string;
    })[];
}[]
additionalComponents: [
          {
            name: stringname: "Link",
            as: stringas: "a",
            
attributes: ({
    name: string;
    as: string;
} | {
    name: string;
    defaultValue: string;
})[]
attributes: [
              { name: stringname: "to", as: stringas: "href" },
              { name: stringname: "rel", defaultValue: stringdefaultValue: "noopener noreferrer" },
            ],
          },
          // ...
        ],
        version: stringversion: "detect",
      },
    },
  },
];
InstallationPresets