babel-plugin-remove-react-fc-and-vfc

babel-plugin-remove-react-fc-and-vfc

This plugin removes React.VFC and React.FC annotation.

Input:

const Component: React.FC<Props> = (props) => {
  return <div>{props.value}</div>;
};

Output:

const Component = (props: Props) => {
  return <div>{props.value}</div>;
};

Why?

As React.XXX is modified frequently like React.SFC was removed or the children type will be removed from React.FC, I think we should not use React.XXX type as much as possible.

See more details

• Remove React.FC from Typescript template
• 【検証】React.FC と React.VFC はべつに使わなくていい説

Install

$ npm install --save-dev babel-plugin-remove-react-fc-and-vfc

and add it to your .babelrc.

{
  "plugins": ["remove-react-fc-and-vfc"]
}

Contributing

Welcome your contribution!

See also Babel Plugin Handbook.

Setup

$ git clone [e-mail]:nissy-dev/babel-plugin-remove-react-fc-and-vfc.git
$ cd babel-plugin-remove-react-fc-and-vfc
$ npm ci

Development Tools

// run tsc, eslint, prettier
$ npm run lint

// run test
$ npm run test