UNPKG

babel-plugin-react-import-extends

Version:

Write React Components without worrying to import React and extend component

106 lines (77 loc) 2.01 kB
# 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](https://github.com/vijaysutrave)