https://github.com/orzarchi/react-codemod-pure-component-to-class

A react codemod to transform stateless/pure/functional components to class components.
https://github.com/orzarchi/react-codemod-pure-component-to-class

Last synced: 6 days ago
JSON representation

A react codemod to transform stateless/pure/functional components to class components.

• Host: GitHub
• URL: https://github.com/orzarchi/react-codemod-pure-component-to-class
• Owner: orzarchi
• License: mit
• Created: 2018-04-20T18:10:59.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-04-21T10:39:48.000Z (over 6 years ago)
• Last Synced: 2024-08-02T07:21:59.326Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 9.77 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-codemods - react-codemod-pure-component-to-class - A react codemod to transform stateless/pure/functional components to class components. (Frameworks / React.js)

README

        
# Pure Component To class

[![npm version](https://badge.fury.io/js/pure-component-to-class.svg)](https://badge.fury.io/js/pure-component-to-class)

A react [codemod](https://github.com/reactjs/react-codemod/) to transform stateless/pure/functional components to class components.

Based on:

* [react-pure-to-class](https://github.com/angryobject/react-pure-to-class)

* [js-transforms](https://github.com/jhgg/js-transforms/blob/master/pure-to-composite-component.js)

### Usage:

```

npm install pure-component-to-class

npm install -g jscodeshift

// Run using IDE command or via CLI

jscodeshift -t node_modules/pure-component-to-class/pure-component-to-class.js components/TestComponent.jsx

```

### Examples:

##### Before:

```javascript

export default ({foo, bar}) => (

  
{foo}

)


let Foo = () => 
foo
;


let FooFunc = function (){

  return 
foo
;

};


let FooUsingProps = (props) => {

  const {

    item

  } = props;

  return 
{item}{props.item2}
;

};


let FooUsingPropsWithDifferentName = (propsName) => {

  const {

    item

  } = propsName;

  return 
{item}{propsName.item2}
;

};

```

##### After:

```javascript

export default class extends React.Component {

  render() {

    const {foo, bar} = this.props;

    return 
{foo}
;

  }

}


class Foo extends React.Component {

  render() {

    return 
foo
;

  }

}


class FooFunc extends React.Component {

  render() {

    return 
foo
;

  }

}


class FooUsingProps extends React.Component {

  render() {

    const {

      item

    } = this.props;

    return 
{item}{this.props.item2}
;

  }

}


class FooUsingPropsWithDifferentName extends React.Component {

  render() {

    const propsName = this.props;

    const {

      item

    } = propsName;

    return 
{item}{propsName.item2}
;

  }

}


```