react/jsx-handler-names Style
What it does
Ensures that any component or prop methods used to handle events are correctly prefixed.
Why is this bad?
Inconsistent naming of event handlers and props can reduce code readability and maintainability.
Examples
Examples of incorrect code for this rule:
<MyComponent handleChange={this.handleChange} />
<MyComponent onChange={this.componentChanged} />Examples of correct code for this rule:
<MyComponent onChange={this.handleChange} />
<MyComponent onChange={this.props.onFoo} />Configuration
This rule accepts a configuration object with the following properties:
checkInlineFunction
type: boolean
default: false
Whether to check for inline functions in JSX attributes.
checkLocalVariables
type: boolean
default: false
Whether to check for local variables in JSX attributes.
eventHandlerPrefix
type: string | boolean
default: "handle"
Event handler prefixes to check against.
eventHandlerPropPrefix
type: string | boolean
default: "on"
Event handler prop prefixes to check against.
ignoreComponentNames
type: string[]
default: []
Component names to ignore when checking for event handler prefixes.
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/jsx-handler-names": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/jsx-handler-names": "error",
},
});oxlint --deny react/jsx-handler-names --react-pluginVersion
This rule was added in v1.13.0.