react/destructuring-assignment codemod

A jscodeshift codemod to destructure assignments of props, state, and context

🚧this project is a work in progress. Check out https://github.com/yannvr/codemods for a similar attempt.

Usage

npm install -g jscodeshift
git clone https://github.com/thibaudcolas/react-destructuring-assignment-codemod.git
cd react-destructuring-assignment-codemod
npm install
jscodeshift -t <codemod-script> <path>

codemod-script - path to the transform file, see available scripts below.
path - files or directory to transform.
Use the -d option for a dry-run and use -p to print the output for comparison.
Use the --extensions option if your files have different extensions than .js (for example, --extensions js,jsx).
If you use flowtype, you might also need to use --parser=flow.
See all available jscodeshift options.

Included Scripts

`react-destructuring-assignment`

This converts all usage of props, and state to use destructuring assignment, addressing the corresponding linting rule from eslint-plugin-react: react/destructuring-assignment with the always setting.

For example,

// Before.
const MyComponent = props => {
  return <div id={props.id} />;
};
// After.
const MyComponent = ({ id }) => {
  return <div id={id} />;
};