reactjstypescripteslinteslintrctypescript-eslint

ESLint restrict using React.StatelessComponent and React.FunctionalComponent

Is there a rule where in I can disable usage of React.StatelessComponent or React.FunctionalComponent to use only React.FC

For example:

export const ComponentOne: React.StatelessComponent<Props> = (props) => { return <....> };
export const ComponentTwo: React.FunctionalComponent<Props> = (props) => { return <....> };

Should be enforced by ESLint to be written as

export const ComponentOne: React.FC<Props> = (props) => { return <....> };
export const ComponentTwo: React.FC<Props> = (props) => { return <....> };

I think it's possible via no-restricted-syntax rule but can't figure out from the documentation.

Solution

  • Ok was finally able to figure it out, can achieve this using the rule @typescript-eslint/ban-types

    "@typescript-eslint/ban-types": ["error",
{
    "types": {
        "React.StatelessComponent": { "message": "Please use React.FC instead.", "fixWith": "React.FC" },
        "React.FunctionalComponent": { "message": "Please use React.FC instead.", "fixWith": "React.FC" },
     }
   }
]