babel-plugin-transform-react-class-to-function

A Babel 7 plugin which transforms React component classes into functions

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-transform-react-class-to-function
1.2.25 years ago6 years agoMinified + gzip package size for babel-plugin-transform-react-class-to-function in KB

Readme

babel-plugin-transform-react-class-to-function
A Babel 7 plugin which transforms React component classes into functions

!npm versionnpm-imagenpm-url !build statustravis-imagetravis-url !codecovcodecov-imagecodecov-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

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: 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.