https://github.com/vscodeshift/react-codemorphs
Codemod commands for everyday work with React. All commands support Flow, TypeScript, and plain JS.
https://github.com/vscodeshift/react-codemorphs
codemods jscodeshift react refactoring vscode
Last synced: 6 months ago
JSON representation
Codemod commands for everyday work with React. All commands support Flow, TypeScript, and plain JS.
- Host: GitHub
- URL: https://github.com/vscodeshift/react-codemorphs
- Owner: vscodeshift
- License: mit
- Created: 2020-01-23T06:15:53.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:33:22.000Z (over 2 years ago)
- Last Synced: 2025-02-10T09:15:15.606Z (8 months ago)
- Topics: codemods, jscodeshift, react, refactoring, vscode
- Language: TypeScript
- Homepage:
- Size: 3.87 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Codemorphs
[](https://circleci.com/gh/vscodeshift/react-codemorphs)
[](https://codecov.io/gh/vscodeshift/react-codemorphs)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://marketplace.visualstudio.com/items?itemName=vscodeshift.react-codemorphs)
Codemod commands for everyday work with React. All commands support Flow, TypeScript, and plain JS.
# Wrap with JSX Element
Adds a parent JSX Element around the selected JSX node(s) or the node that contains the cursor.
## Example
### Before
```tsx
const Foo = () => (
// selection start
{foo}
{bar}
// selection end
{baz}
)
```
### After
```tsx
const Foo = () => (
{foo}
{bar}
{baz}
)
```
# Wrap with Child Function Element
Wraps the JSX Element that contains the cursor in a parent JSX Element with a child function
(making the child function return the wrapped element).
## Example
### Before
```tsx
const Foo = () => (
)
```
Position cursor in `` then run the command.
### After
```tsx
const Foo = () => (
{(): React.ReactNode => }
)
```
# `addProp`
Adds the identifier under the cursor as a prop to the surrounding component.
Adds a prop type declaration if possible, and binds the identifier via destructuring on `props`
or replaces it with a reference to `props`/`this.props`.
## Example
### Before
```tsx
import * as React from 'react'
interface Props {}
const Foo = (props: Props) =>
{text}
```
Position cursor in the middle of `text` and then run the command.
The command will prompt you what type to use for the property, enter `string` for example:
### After (with formatting)
```tsx
import * as React from 'react'
interface Props {
text: string
}
const Foo = (props: Props) =>
{props.text}
```
# Render Conditionally
Wraps the selected JSX in `{true && ...}`. If
there are multiple siblings selected, wraps in `{true && ...}`.
If you want to wrap in a ternary conditional like Glean's
"Render Conditionally" refactor, see `wrapWithTernaryConditional`.
## Example
### Before
```tsx
const Foo = () => (
{foo} bar
{baz}
)
```
Select from before `{foo}` to before `{baz}`, then run the command.
### After (with formatting)
```tsx
const Foo = () => (
{true && (
{foo} bar
)}
{baz}
)
```
# Wrap with Ternary Conditional
Wraps the selected JSX in `{true ? ... : null}`. If
there are multiple siblings selected, wraps in `{true ? ... : null}`.
## Example
### Before
```tsx
const Foo = () => (
{foo} bar
{baz}
)
```
Select from before `{foo}` to before `{baz}`, then run the command.
### After (with formatting)
```tsx
const Foo = () => (
{true ? (
{foo} bar
) : null}
{baz}
)
```