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} />

Options

{
  "react/jsx-handler-names": [<enabled>, {
    "eventHandlerPrefix": <eventHandlerPrefix>,
    "eventHandlerPropPrefix": <eventHandlerPropPrefix>,
    "checkLocalVariables": <boolean>,
    "checkInlineFunction": <boolean>,
    "ignoreComponentNames": Array<string>
  }]
}

• eventHandlerPrefix: Prefix for component methods used as event handlers. Defaults to handle
• eventHandlerPropPrefix: Prefix for props that are used as event handlers Defaults to on
• checkLocalVariables: Determines whether event handlers stored as local variables are checked. Defaults to false
• checkInlineFunction: Determines whether event handlers set as inline functions are checked. Defaults to false
• ignoreComponentNames: Array of glob strings, when matched with component name, ignores the rule on that component. Defaults to []

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/jsx-handler-names --react-plugin

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-handler-names": "error"
  }
}

References

• Rule Source