# react/boolean-prop-naming

> Enforce a naming pattern such as `isOpen` or `hasIcon` for boolean props

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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml 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.

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"options": [{}]} */}
```tsx
type Props = { open: boolean; title: string };

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

{/* bad {"options": [{}]} */}
```jsx
function Dialog({ open }) {
  return <dialog open={open} />;
}
Dialog.propTypes = { open: PropTypes.bool };
```

Not reported:

{/* good {"options": [{}]} */}
```tsx
type Props = { isOpen: boolean; title: string };

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

Without options, nothing is reported:

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

## Options

```toml 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:

{/* good {"options": [{"rule": "^(is|has|should)[A-Z]"}]} */}
```jsx
function Dialog({ shouldAnimate }) {
  return <dialog className={shouldAnimate ? "fade" : ""} />;
}
Dialog.propTypes = { shouldAnimate: PropTypes.bool };
```

With `propTypeNames`, your own validator counts as boolean too:

{/* bad {"options": [{"propTypeNames": ["bool", "mutuallyExclusiveTrueProps"]}]} */}
```jsx
function Dialog({ modal }) {
  return <dialog data-modal={modal} />;
}
Dialog.propTypes = { modal: mutuallyExclusiveTrueProps };
```

With `validateNested`, a shape's fields are checked:

{/* bad {"options": [{"validateNested": true}]} */}
```jsx
function Dialog({ settings }) {
  return <dialog open={settings.open} />;
}
Dialog.propTypes = {
  settings: PropTypes.shape({ open: PropTypes.bool }),
};
```