1.1.6 • Published 5 years ago
react-pure-to-class v1.1.6
A jscodeshift
transformer to create react class component from pure functional component. Works both for JavaScript and TypeScript.
Turns this:
function MyComponent(props) {
return <div>{props.message}</div>;
};
into this:
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
const {
props,
} = this;
return <div>{props.message}</div>;
}
}
It makes some assumptions about functions that can be transformed:
- function should has zero or one argument (i.e.
props
, though the name me be different) - the argument, if present, should be an identifier (
foo => {..}
) or object pattern(({ foo }) => {...}
). This means array patterns (([foo]) => {...}
) and default function parameters ((foo = defaultFoo) => {...}
) don't work.props
is always an object and default props are handled differently in React - the functions should not appear inside other functions, be property of an objects or method of a class
See jscodeshift for more info on transformations.
Basic manual usage in node (you probably don't need it):
const jscodeshift = require('jscodeshift');
const pureToClass = require('react-pure-to-class');
const options = {
reactComponent: 'React.Component',
printOptions: {
quote: 'single',
trailingComma: true,
},
};
const source = ''; // your source code here;
const transformedSource = pureToClass(
{ source },
{ jscodeshift },
options // or empty object for defaults
);
It also works as a cli, which may be useful in vim to transform selected code, like so:
:'<,'>!react-pure-to-class