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

const Foo = () => (
  <div>
    // selection start
    {foo}
    {bar}
    <span />
    // selection end
    {baz}
  </div>
)

After

const Foo = () => (
  <div>
    <Test>
      {foo}
      {bar}
      <span />
    </Test>
    {baz}
  </div>
)

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

const Foo = () => (
  <div>
    <Bar />
  </div>
)

Position cursor in <Bar /> then run the command.

After

const Foo = () => (
  <div>
    <Test>{(): React.ReactNode => <Bar />}</Test>
  </div>
)

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

import * as React from 'react'

interface Props {}

const Foo = (props: Props) => <div>{text}</div>

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)

import * as React from 'react'

interface Props {
  text: string
}

const Foo = (props: Props) => <div>{props.text}</div>

Render Conditionally

Wraps the selected JSX in {true && ...}. If there are multiple siblings selected, wraps in {true && <React.Fragment>...</React.Fragment>}.

If you want to wrap in a ternary conditional like Glean's "Render Conditionally" refactor, see wrapWithTernaryConditional.

Example

Before

const Foo = () => (
  <div>
    {foo} bar
    <span />
    {baz}
  </div>
)

Select from before {foo} to before {baz}, then run the command.

After (with formatting)

const Foo = () => (
  <div>
    {true && (
      <React.Fragment>
        {foo} bar
        <span />
      </React.Fragment>
    )}
    {baz}
  </div>
)

Wrap with Ternary Conditional

Wraps the selected JSX in {true ? ... : null}. If there are multiple siblings selected, wraps in {true ? <React.Fragment>...</React.Fragment> : null}.

Example

Before

const Foo = () => (
  <div>
    {foo} bar
    <span />
    {baz}
  </div>
)

Select from before {foo} to before {baz}, then run the command.

After (with formatting)

const Foo = () => (
  <div>
    {true ? (
      <React.Fragment>
        {foo} bar
        <span />
      </React.Fragment>
    ) : null}
    {baz}
  </div>
)