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'; Component static propTypes = className: PropTypesstring { const className = thisprops; return <div => Hello world! </div> }
Out
import PropTypes from 'prop-types';import React from 'react'; const HelloWorld = className return <div => Hello world! </div> ; HelloWorldpropTypes = className: PropTypesstring; ;
Installation
npm install @babel/core babel-plugin-transform-react-class-to-function
Usage
babel.config.js
(Recommended)
Via module plugins: 'babel-plugin-transform-react-class-to-function' ;
Via CLI
babel --plugins babel-plugin-transform-react-class-to-function
Via Node API
;
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.