babel-plugin-react-import-extends

Write React Components without having to extend React.Component or importing React with every Component.

Have you ever wondered how easy it would be to get rid of the annoying ...extends React.Component and not having to manually import React with every component that you write?

Enter babel-plugin-react-import-extends

This babel plugin auto-magically extends a "React Component", and imports React within the component if the detects the file type to be a React Component, so that you don't have to repeat that annoying stuff anymore, yay!

Install

npm install --save-dev babel-plugin-react-import-extends

Usage

Add the plugin to the plugins list in your .babelrc file

Via .babelrc (recommended):

{
  plugins: ['react-import-extends', ...otherPlugins]
}

Via CLI

babel --plugins react-import-extends script.js

Standard Input & Output Examples

1. With a Stateful Component

In

class StatefulComponent {
  componentDidMount() {
    console.log('mounted')
  }

  render() {
    return (
      <div className="test">
        Hello!
      </div>
    )
  }
}
export default StatefulComponent;

Out

import React, {PropTypes, Component} from "react";
class StatefulComponent extends Component {
  componentDidMount() {
    console.log('mounted');
  }

  render() {
    return <div className="test">
        Hello!
      </div>;
  }
}
export default StatefulComponent;

2. With functional components

In

const StatelessComponent = () => {
  return (
    <div className="test">
      Hello!
    </div>
  )
}

export default StatelessComponent;

Out

import React, {PropTypes, Component} from "react";
const StatelessComponent = () => {
  return <div className="test">
      Hello!
    </div>;
};

export default StatelessComponent;

Todo

• Options to add more imports
• PureComponent implementation

License

MIT © vijaysutrave