#jsx-handler-names

#Configuration

import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/jsx-handler-names': 'error',
    },
  },
]);

#Rule Details

Enforce event handler naming conventions in JSX. This rule ensures that any component or prop methods used to handle events are correctly prefixed.

By default, event handler functions must be named handleX (camelCase, beginning with handle), and props that receive event handlers must be named onX (camelCase, beginning with on).

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

#Rule Options

{
  "react/jsx-handler-names": [
    "error",
    {
      "eventHandlerPrefix": "handle",
      "eventHandlerPropPrefix": "on",
      "checkLocalVariables": false,
      "checkInlineFunction": false,
      "ignoreComponentNames": []
    }
  ]
}

• eventHandlerPrefix: Prefix for component methods used as event handlers. Defaults to handle. Set to false to disable handler-name checks.
• eventHandlerPropPrefix: Prefix for props that are used as event handlers. Defaults to on. Set to false to disable prop-key checks.
• 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 []. Supports namespaced component names (e.g., A.TestComponent, A.MyLib*).

Examples of incorrect code for this rule with { "checkLocalVariables": true }:

{ "react/jsx-handler-names": ["error", { "checkLocalVariables": true }] }

<MyComponent onChange={takeCareOfChange} />

Examples of correct code for this rule with { "checkLocalVariables": true }:

{ "react/jsx-handler-names": ["error", { "checkLocalVariables": true }] }

<MyComponent onChange={handleChange} />

Examples of incorrect code for this rule with { "checkInlineFunction": true }:

{ "react/jsx-handler-names": ["error", { "checkInlineFunction": true }] }

<MyComponent onChange={() => this.takeCareOfChange()} />

Examples of correct code for this rule with { "checkInlineFunction": true }:

{ "react/jsx-handler-names": ["error", { "checkInlineFunction": true }] }

<MyComponent onChange={() => this.handleChange()} />

Examples of correct code for this rule with { "ignoreComponentNames": ["MyLib*"] }:

{
  "react/jsx-handler-names": [
    "error",
    { "checkLocalVariables": true, "ignoreComponentNames": ["MyLib*"] }
  ]
}

<MyLibInput customPropNameBar={handleSomething} />

#When Not To Use It

If you are not using JSX, or if you don't want to enforce specific naming conventions for event handlers.

#Original Documentation

• react/jsx-handler-names