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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!