[Bug]: react/boolean-prop-naming not working with component wrapper functions #3844
Open
Description
opened on Oct 28, 2024
Is there an existing issue for this?
- I have searched the existing issues and my issue is unique
- My issue appears in the command-line and not only in the text editor
Description Overview
The rule doesn't work if the component is wrapped by a function, such as memo
:
type Props = {
// eslint error
isVisible: boolean;
}
const Comp = (props: Props) => (
<div />
)
type Props = {
// no error
isVisible: boolean;
}
const Comp = memo(
(props: Props) => (
<div />
)
)
I need to use wrapper functions in this way because I'm also using the missing-observer
rule from eslint-plugin-mobx, which works only if the component itself is wrapped. If observer
is added to export like this export default observer(Comp)
, then missing-observer
rule doesn't work as expected and still gives an error
Also, the rule doesn't work if the component is wrapper by memo
, forwardRef
etc. So this problem persists not only when using observer
Rule configuration:
'react/boolean-prop-naming': [
2,
{
propTypeNames: ['boolean'],
rule: '^(?!is|has)[a-z]([A-Za-z0-9]?)+',
message: 'Do not use prefix "is" or "has" for boolean props',
validateNested: true,
},
],
React configuration in eslint.config.ts
:
import reactPlugin from 'eslint-plugin-react';
[
{
languageOptions: reactPlugin.configs.flat['jsx-runtime'].languageOptions,
settings: {
react: {
version: 'detect',
componentWrapperFunctions: ['observer']
}
}
},
]
Expected Behavior
This code should give a eslint error
type Props = {
isVisible: boolean;
}
const Comp = memo(
(props: Props) => (
<div />
)
)
eslint-plugin-react version
v7.37.1
eslint version
v9.13.0
node version
v20.11.0
Activity