react/boolean-prop-naming interface does not work

[DavidShefcik]

The react/boolean-prop-naming rule does not work when using an interface with TypeScript but it works with a type

This shows an error like it should:

type Props = {
  done: boolean; // Shows error
}

This doesn't show an error like it should:

interface Props {
  done: boolean; // No error
}

My usage of the rule:

"react/boolean-prop-naming": [
      "error",
      {
        "rule": "^(is|has)[A-Z]([A-Za-z0-9]?)+",
        "message": "It is better if your prop ({{ propName }}) starts with `is` or `has`"
      }
    ],

Versions:

• eslint - 8.15.0
• eslint-plugin-react 7.29.4

[AgentRBY]

Any updates?

[ljharb]

@AgentRBY nope, if there were updates, they'd be posted in the issue, or there'd be a linked PR. (that's true everywhere on github)

[Gergely-H]

It does not work with inline-defined prop types either. I would not suggest anyone use inline types, but it might help locate this problem.

Example for getting no error even with @DavidShefcik's rule enabled:

const TestComponent: FC<{
  isEnabled: boolean;
  enabled: boolean;
}> = ({ isEnabled, enabled }) => {
//...
};

[leadq]

when declaring Prop's properties, using "interface" instead of "type" keyword breaks the rule. I also experienced the same issue

[fescherer]

It seems like now at "eslint": "^8.47.0" with "eslint-plugin-react": "^7.33.1" is not working this rule (react/boolean-prop-naming) neither as type or interface

[ljharb]

@ofelipescherer can you provide a repro? what code and config isn't working as you expect on the command line?

[fescherer]

Yes, of course. I created a sandbox demo.

The prop enabled should give me an error, right? I want to give me as suggestion isEnabled.

[desjardinsm]

Yes, of course. I created a sandbox demo.

The prop enabled should give me an error, right? I want to give me as suggestion isEnabled.

I've never been able to get custom ESLint configuration working in CodeSandbox; I found a couple of issues asking for it but I don't think it ever has been added (at least, I have never been able to get it to recognize my config files, but maybe I'm just missing something). Using your sandbox as a baseline I can't get any other rules or plugins set in a config file to work either. /* eslint */ comments work, but you can't add rules from a plugin that hasn't been added to the config that way.

In a local test repo, it does work with a props declared with a type, but only if you use an options object (even if it is empty):

"react/boolean-prop-naming": ["warn", {}],

But I don't think that is related to the original issue of it not working on interface props.

[fescherer]

Yes, of course. I created a sandbox demo.
The prop enabled should give me an error, right? I want to give me as suggestion isEnabled.

I've never been able to get custom ESLint configuration working in CodeSandbox; I found a couple of issues asking for it but I don't think it ever has been added (at least, I have never been able to get it to recognize my config files, but maybe I'm just missing something). Using your sandbox as a baseline I can't get any other rules or plugins set in a config file to work either. /* eslint */ comments work, but you can't add rules from a plugin that hasn't been added to the config that way.

In a local test repo, it does work with a props declared with a type, but only if you use an options object (even if it is empty):

"react/boolean-prop-naming": ["warn", {}],

But I don't think that is related to the original issue of it not working on interface props.

Yeah, you are right. I tested again in local and worked. I probably made some mistake on the first time tried. Thanks

[FinnWinchester]

It happens to me as well. It flags me the variable declared inside a type but not when declared inside an interface or inline within the component declaration.

My deps are:
"@babel/eslint-parser": "7.22.10",
"@typescript-eslint/eslint-plugin": "5.59.11",
"@typescript-eslint/parser": "5.59.11",
"eslint": "8.47.0",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-react": "7.33.2",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-simple-import-sort": "10.0.0",

And my settings are:
"react/boolean-prop-naming": [ "warn", { "propTypeNames": ["bool"], "rule": "^(is|has|are|can)[A-Z]([A-Za-z0-9]?)+|enabled|disabled", "validateNested": true } ],

[alerizzo]

This is still an issue; also adding other broken scenarios:

Extending the type also fails:

type Props = {
  enabled: boolean
}
const Hello = (props: Props & BaseProps) => <div />;

Passing the type as a generic also fails

type Props = {
  enabled: boolean
}
const Hello: React.FC<Props> = (props) => <div />;