Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remcohaszing/babel-plugin-transform-react-class-to-function
A Babel 7 plugin which transforms React component classes into functions
https://github.com/remcohaszing/babel-plugin-transform-react-class-to-function
babel react
Last synced: 22 days ago
JSON representation
A Babel 7 plugin which transforms React component classes into functions
- Host: GitHub
- URL: https://github.com/remcohaszing/babel-plugin-transform-react-class-to-function
- Owner: remcohaszing
- License: mit
- Created: 2018-06-24T10:00:37.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2021-11-06T18:31:52.000Z (about 3 years ago)
- Last Synced: 2024-10-06T12:00:12.870Z (about 1 month ago)
- Topics: babel, react
- Language: JavaScript
- Homepage:
- Size: 1.3 MB
- Stars: 24
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-babel - babel-plugin-transform-react-class-to-function - Transforms React class components into a function, if possible. (Plugins / React)
README
# babel-plugin-transform-react-class-to-function
> A Babel 7 plugin which transforms React component classes into functions
[![npm version][npm-image]][npm-url] [![build status][github-actions-image]][github-actions-url]
[![codecov][codecov-image]][codecov-url]
Writing React components using the class syntax has several benefits:
- **Consistency** — Define all components using similar syntax.
- **Static properties** — Components are more self contained when using static class properties.
- **Simpler diffs** — No need to change the entire indentation converting between classes and
functions.
There is one obvious downside:
- **Size** — Class components are larger than function components.
This plugin solves that for you. 😃
## Example
### In
```js
import PropTypes from 'prop-types';
import { Component } from 'react';
export class HelloWorld extends Component {
static propTypes = {
className: PropTypes.string,
};
render() {
const { className } = this.props;
return
Hello world!;
}
}
```
### Out
```js
import PropTypes from 'prop-types';
import { Component } from 'react';
export const HelloWorld = ({ className }) =>
Hello world!;
HelloWorld.propTypes = {
className: PropTypes.string,
};
```
## Installation
```sh
npm install @babel/core babel-plugin-transform-react-class-to-function
```
## Usage
### Via `babel.config.js` (Recommended)
```js
module.exports = (api) => ({
plugins: ['babel-plugin-transform-react-class-to-function'],
});
```
### Via CLI
```sh
babel --plugins babel-plugin-transform-react-class-to-function
```
### Via Node API
```js
require('@babel/core').transform(code, {
plugins: ['babel-plugin-transform-react-class-to-function'],
});
```
## Options
### `memo`
- `true`: Transform `PureComponent` and components implementing `shouldComponentUpdate` to
functional components using [React memo].
- `false` (default): Don’t transform `PureComponent` or components implementing
`shouldComponentUpdate`.
## Special Thanks
This plugin was originally based on [babel-plugin-transform-react-pure-class-to-function]. However,
the project has diverged a lot. You may want to give that project a try if you need to use babel 6.
[babel-plugin-transform-react-pure-class-to-function]:
https://www.npmjs.com/package/babel-plugin-transform-react-pure-class-to-function
[codecov-image]:
https://codecov.io/gh/remcohaszing/babel-plugin-transform-react-class-to-function/branch/main/graph/badge.svg
[codecov-url]: https://codecov.io/gh/remcohaszing/babel-plugin-transform-react-class-to-function
[npm-image]: https://img.shields.io/npm/v/babel-plugin-transform-react-class-to-function.svg
[npm-url]: https://www.npmjs.com/package/babel-plugin-transform-react-class-to-function
[react memo]: https://reactjs.org/docs/react-api.html#reactmemo
[github-actions-image]:
https://github.com/remcohaszing/babel-plugin-transform-react-class-to-function/workflows/ci/badge.svg
[github-actions-url]:
https://github.com/remcohaszing/babel-plugin-transform-react-class-to-function/actions