Configuration
Configure Analyzer
ESLint React reads analyzer properties from the react-x key within ESLint's settings object.
You can provide the following properties to customize the analyzer behavior:
export default [
{
files: ["**/*.ts", "**/*.tsx"],
settings: {
"react-x": {
version: "19.1.0", // React version for analysis
// ...other properties
},
},
},
];Properties
Prop
Type
Property Specifications
version
Defines the React version for semantic analysis.
detect: Auto-detects from project dependencies (defaults to19.1.0if undetectable)string: Explicit version specification (e.g.,"18.3.1")
importSource
Customizes the React module import source. Useful for non-standard distributions.
Example for using @pika/react instead of react:
import React from "@pika/react";polymorphicPropName
Defines the prop used for polymorphic components. Helps rules determine element types for semantic context.
Example with polymorphicPropName set to as:
<Box as="h3">Hello</Box>
// Evaluated as an h3 elementComplete Configuration Example
import eslintReact from "@eslint-react/eslint-plugin";
export default [
{
files: ["**/*.ts", "**/*.tsx"],
settings: {
"react-x": {
version: "19.1.0", // Specify the React version for semantic analysis (can be "detect" for auto-detection)
importSource: "react", // Customize the import source for the React module (defaults to "react")
polymorphicPropName: "as", // Define the prop name used for polymorphic components (e.g., <Component as="div">)
},
},
},
];