jsx-handler-names.md

Enforce event handler naming conventions in JSX (react/jsx-handler-names)

Ensures that any component or prop methods used to handle events are correctly prefixed.

Rule Details

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": [<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 []

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.