CODEWITHSUNDEEP
reactjstypescripteslinteslintrctypescript-eslint
hendrixchord
hendrixchord

Reputation: 5434

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.

Upvotes: 2

Views: 2116

Answers (2)

tanguy_k
tanguy_k

Reputation: 12323

How to ban React.FC (why? https://github.com/facebook/create-react-app/pull/8177):

"@typescript-eslint/no-restricted-types": [
  "error",
  {
    types: {
      "React.FC": {
        message: "Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177",
      },
      "React.FunctionComponent": {
        message: "Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177",
      },
      "React.FunctionalComponent": {
        message:
          "Preact specific, useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177",
      },
    },
  },
],

Upvotes: 6

hendrixchord
hendrixchord

Reputation: 5434

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" },
     }
   }
]

Upvotes: 4

Related Questions