1.2.2 • Published 5 years ago
babel-plugin-transform-react-class-to-function v1.2.2
babel-plugin-transform-react-class-to-function
A Babel 7 plugin which transforms React component classes into functions
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
import PropTypes from 'prop-types';
import React from 'react';
export default class HelloWorld extends React.Component {
static propTypes = {
className: PropTypes.string,
}
render() {
const {
className,
} = this.props;
return (
<div className={className}>
Hello world!
</div>
)
}
}
Out
import PropTypes from 'prop-types';
import React from 'react';
const HelloWorld = ({
className,
}) => {
return (
<div className={className}>
Hello world!
</div>
)
};
HelloWorld.propTypes = {
className: PropTypes.string,
};
export default HelloWorld;
Installation
npm install @babel/core babel-plugin-transform-react-class-to-function
Usage
Via babel.config.js
(Recommended)
module.exports = (api) => ({
plugins: [
'babel-plugin-transform-react-class-to-function',
],
});
Via CLI
babel --plugins babel-plugin-transform-react-class-to-function
Via Node API
require('@babel/core').transform(code, {
plugins: [
'babel-plugin-transform-react-class-to-function',
],
});
Options
memo
true
: TransformPureComponent
and components implementingshouldComponentUpdate
to functional components using React memo.false
(default): Don’t transformPureComponent
or components implementingshouldComponentUpdate
.
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.