jsx-shorthand-boolean

Full Name in @eslint-react/eslint-plugin

@eslint-react/jsx-shorthand-boolean

Full Name in eslint-plugin-react-x

react-x/jsx-shorthand-boolean

Features

🔧 ⚙️

Presets

Rule Details

JSX allows shorthand syntax for boolean props where disabled={true} can be simplified to just disabled. This rule enforces using the shorthand syntax for cleaner code.

Common Violations

Invalid

function MyComponent() {
  return <button disabled={true} />;
  //             ^^^ Omit the `=true` for boolean attributes.
}

Valid

function MyComponent() {
  return <button disabled />;
}

Rule Options

This rule has a single integer option with the following values:

• 1 (Default): Always use shorthand syntax for boolean attributes.
• -1: Never use shorthand syntax for boolean attributes.

Resources

• Rule Source
• Test Source

Further Reading

• React Docs: JSX

See Also

• jsx-shorthand-fragment
  Enforces shorthand syntax for fragment elements