Documentation
Configuration

Configuration

This plugin 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: Record<string, string[]>)

A Record of aliases for React’s 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"] }).

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[];
        };
        version: string;
    };
}
settings: {
      "react-x": {
        importSource: stringimportSource: "react",
        jsxPragma: stringjsxPragma: "createElement",
        jsxPragmaFrag: stringjsxPragmaFrag: "Fragment",
        
additionalHooks: {
    useLayoutEffect: string[];
}
additionalHooks: {
          useLayoutEffect: string[]useLayoutEffect: ["useIsomorphicLayoutEffect"],
          // ...
        },
        version: stringversion: "detect",
      },
    },
  },
  // ...
];
InstallationPresets