react/boolean-prop-naming

A prop called open could be a flag, a callback, or a label. isOpen can only be a flag. This rule checks the names of the props a component declares as boolean, in propTypes or in a TypeScript type.

The rule doesn't check anything until you give it an options object. An empty one, {}, turns on the default pattern.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/boolean-prop-naming" = "error" # or "warn"

Every option, set to its default. The ones that are commented out are unset by default.

bunfig.toml

[lint.rules]
"react/boolean-prop-naming" = ["error", {
  rule = "^(is|has)[A-Z]([A-Za-z0-9]?)+",
  propTypeNames = ["bool"],
  # message = <string>,
  validateNested = false,
}]

Examples#

Reported:

type Props = { open: boolean; title: string };

function Dialog(props: Props) {
  return <dialog open={props.open}>{props.title}</dialog>;
}

function Dialog({ open }) {
  return <dialog open={open} />;
}
Dialog.propTypes = { open: PropTypes.bool };

Not reported:

type Props = { isOpen: boolean; title: string };

function Dialog(props: Props) {
  return <dialog open={props.isOpen}>{props.title}</dialog>;
}

Without options, nothing is reported:

function Dialog(props: { open: boolean }) {
  return <dialog open={props.open} />;
}

Options#

bunfig.toml

[lint.rules]
"react/boolean-prop-naming" = ["error", { rule = "^(is|has|should)[A-Z]" }]

Option	Default	What it does
`rule`	`"^(is\|has)[A-Z]([A-Za-z0-9]?)+"`	The regular expression that a boolean prop's name must match.
`propTypeNames`	`["bool"]`	The names of the `propTypes` validators that count as boolean.
`message`		Replaces the text of the report. `{{propName}}` and `{{pattern}}` are filled in.
`validateNested`	`false`	Also check the props inside `PropTypes.shape({ ... })` and similar calls.

With rule, you choose the prefixes:

function Dialog({ shouldAnimate }) {
  return <dialog className={shouldAnimate ? "fade" : ""} />;
}
Dialog.propTypes = { shouldAnimate: PropTypes.bool };

With propTypeNames, your own validator counts as boolean too:

function Dialog({ modal }) {
  return <dialog data-modal={modal} />;
}
Dialog.propTypes = { modal: mutuallyExclusiveTrueProps };

With validateNested, a shape's fields are checked:

function Dialog({ settings }) {
  return <dialog open={settings.open} />;
}
Dialog.propTypes = {
  settings: PropTypes.shape({ open: PropTypes.bool }),
};