← Back to rules

react/jsx-boolean-value Style

🛠️ An auto-fix is available for this rule.

What it does

Enforce a consistent boolean attribute style in your code.

Why is this bad?

In JSX, you can set a boolean attribute to true or omit it. This rule will enforce a consistent style for boolean attributes.

Examples

Examples of incorrect code for this rule with default "never" mode:

const Hello = <Hello personal={true} />;

Examples of correct code for this rule with default "never" mode:

const Hello = <Hello personal />;

const Foo = <Foo isSomething={false} />;

Examples of incorrect code for this rule with "always" mode:

const Hello = <Hello personal />;

Examples of correct code for this rule with "always" mode:

const Hello = <Hello personal={true} />;

Configuration

The 1st option

type: "always" | "never"

"always"

All boolean attributes must have explicit values.

"never"

All boolean attributes must omit values that are set to true.

The 2nd option

This option is an object with the following properties:

always

type: string[]

default: []

List of attribute names that should always have explicit boolean values. Only necessary when main mode is "never".

assumeUndefinedIsFalse

type: boolean

default: false

If true, treats prop={false} as equivalent to the prop being undefined. When combined with "never" mode, this will enforce that the attribute is omitted entirely.

// With "assumeUndefinedIsFalse": true
<App foo={false} />; // Incorrect
<App />; // Correct

This option does nothing in "always" mode.

never

type: string[]

default: []

List of attribute names that should never have explicit boolean values. Only necessary when main mode is "always".

How to use

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

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-boolean-value": "error"
  }
}

CLI

oxlint --deny react/jsx-boolean-value --react-plugin

References

• Rule Source