https://github.com/vijaysutrave/babel-plugin-react-import-extends

:fast_forward: Babel plugin to get rid of extends Component & import React
https://github.com/vijaysutrave/babel-plugin-react-import-extends

Last synced: 3 months ago
JSON representation

:fast_forward: Babel plugin to get rid of extends Component & import React

• Host: GitHub
• URL: https://github.com/vijaysutrave/babel-plugin-react-import-extends
• Owner: vijaysutrave
• License: mit
• Created: 2017-09-24T17:32:57.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-01T02:01:29.000Z (over 6 years ago)
• Last Synced: 2024-07-18T01:21:18.863Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 10
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-babel - react-import-extends - Extends `Component` if a class renders a JSX element, also adds `import` statement if it detects a JSX component in the file. (Plugins / React)

README

        
# 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 (

      


        Hello!

      

    )

  }

}

export default StatefulComponent;

```


**Out**

```

import React, {PropTypes, Component} from "react";

class StatefulComponent extends Component {

  componentDidMount() {

    console.log('mounted');

  }

  render() {

    return 


        Hello!

      
;

  }

}

export default StatefulComponent;

```


#### 2. With functional components

**In**

```

const StatelessComponent = () => {

  return (

    


      Hello!

    

  )

}


export default StatelessComponent;

```

**Out**

```

import React, {PropTypes, Component} from "react";

const StatelessComponent = () => {

  return 


      Hello!

    
;

};


export default StatelessComponent;

```

## Todo

- Options to add more imports

- PureComponent implementation

## License

MIT © [vijaysutrave](https://github.com/vijaysutrave)