https://github.com/nissy-dev/babel-plugin-remove-react-fc-and-vfc

This plugin removes React.VFC and React.FC annotation
https://github.com/nissy-dev/babel-plugin-remove-react-fc-and-vfc

Last synced: 2 months ago
JSON representation

This plugin removes React.VFC and React.FC annotation

• Host: GitHub
• URL: https://github.com/nissy-dev/babel-plugin-remove-react-fc-and-vfc
• Owner: nissy-dev
• License: mit
• Created: 2021-11-21T11:55:49.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-11-24T00:20:30.000Z (about 4 years ago)
• Last Synced: 2025-03-06T09:55:57.090Z (11 months ago)
• Language: TypeScript
• Homepage:
• Size: 122 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

![release](https://github.com/nissy-dev/babel-plugin-remove-react-fc-and-vfc/actions/workflows/release.yml/badge.svg)

[![License: MIT](https://img.shields.io/github/license/nissy-dev/babel-plugin-remove-react-fc-and-vfc.svg)](https://opensource.org/licenses/MIT)

[![npm version](https://badge.fury.io/js/babel-plugin-remove-react-fc-and-vfc.svg)](https://badge.fury.io/js/babel-plugin-remove-react-fc-and-vfc)

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

Input:

```ts

const Component: React.FC = (props) => {

  return 
{props.value}
;

};

```


Output:

```ts

const Component = (props: Props) => {

  return 
{props.value}
;

};

```


## Why?

As `React.XXX` is modified frequently like [`React.SFC` was removed](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/30364) or [the children type will be removed from React.FC](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/46691), I think we should not use `React.XXX` type as much as possible.

See more details

- [Remove React.FC from Typescript template](https://github.com/facebook/create-react-app/pull/8177)

- [【検証】React.FC と React.VFC はべつに使わなくていい説](https://kray.jp/blog/dont-have-to-use-react-fc-and-react-vfc/)

## Install

```sh

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

```

and add it to your `.babelrc`.

```json

{

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

}

```

## Contributing

Welcome your contribution!

See also [Babel Plugin Handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md).

## Setup

```sh

$ git clone git@github.com:nissy-dev/babel-plugin-remove-react-fc-and-vfc.git

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

$ npm ci

```

## Development Tools

```sh

// run tsc, eslint, prettier

$ npm run lint

// run test

$ npm run test

```