Skip to main content

react

Target package(s):

Presets​

add-react-import​

info

Source | Report an issue

Usage $ codeshift --packages react#add-react-import path/to/source

Import React if it is missing from a file which uses JSX.

Credit: https://github.com/reactjs/react-codemod

/* INPUT */
export const Component = () => <div />

/* OUTPUT */
import React from "react";
export const Component = () => <div />

create-element-to-jsx​

info

Source | Report an issue

Usage $ codeshift --packages react#create-element-to-jsx path/to/source

Converts calls to React.createElement into JSX elements.

Credit: https://github.com/reactjs/react-codemod

/* INPUT */
var React = require('react/addons');

React.createElement(
  'div',
  {},
  React.createElement(
    'span',
    {},
    React.createElement(
      'button',
      {},
      React.createElement(
        'a',
        {href: 'https://www.google.com'},
        React.createElement('audio')
      )
    ),
    React.createElement('br'),
    React.createElement('img')
  )
);

/* OUTPUT */
var React = require('react/addons');

<div>
  <span>
    <button>
      <a href="https://www.google.com">
        <audio />
      </a>
    </button>
    <br />
    <img />
  </span>
</div>;

error-boundaries​

info

Source | Report an issue

Usage $ codeshift --packages react#error-boundaries path/to/source

Renames the experimental unstable_handleError lifecycle hook to componentDidCatch.

Credit: https://github.com/reactjs/react-codemod

/* INPUT */
import React from "react";

export class ComponentOne extends React.Component {
  unstable_handleError(error) {}
  render() {
    return <div />;
  }
}

/* OUTPUT */
import React from "react";

export class ComponentOne extends React.Component {
  componentDidCatch(error) {}
  render() {
    return <div />;
  }
}

remove-default-props​

info

Source | Report an issue

Usage $ codeshift --packages react#remove-default-props path/to/source

Remove use of React defaultProps.

Credit: https://github.com/reactjs/react-codemod

/* INPUT */
import React from 'react';

export const Greet = ({ name }) => <span>Hi {name}</span>;
Greet.defaultProps = { text: 'Stranger' };

/* OUTPUT */
import React from 'react';

export const Greet = ({ name, text = 'Stranger' }) => <span>Hi {name}</span>;
/* INPUT */
import React from 'react';

export const Greet = (props) => <span>Hi {name}</span>;
Greet.defaultProps = { text: 'Stranger' };

/* OUTPUT */
import React from 'react';

export const Greet = ({ ...props, text = 'Stranger' }) => <span>Hi {name}</span>;

remove-prop-types​

info

Source | Report an issue

Usage $ codeshift --packages react#remove-prop-types path/to/source

Remove use of React PropTypes.

Credit: https://github.com/reactjs/react-codemod

/* INPUT */
import React from 'react'
import PropTypes from 'prop-types'

export const Greet = ({ name }) => <span>Hi {name}</span>
Greet.propTypes = { name: PropTypes.string }

/* OUTPUT */
import React from 'react'

export const Greet = ({ name }) => <span>Hi {name}</span>

rename-unsafe-lifecycles​

info

Source | Report an issue

Usage $ codeshift --packages react#rename-unsafe-lifecycles path/to/source

Adds UNSAFE_ prefix for deprecated lifecycle hooks. (For more information about this codemod, see React RFC #6)

Credit: https://github.com/reactjs/react-codemod

/* INPUT */
class ExampleComponent extends React.Component {
  componentWillMount() { }
  componentWillUpdate(nextProps, nextState) { }
  componentWillReceiveProps(nextProps) { }
}

/* OUTPUT */
class ExampleComponent extends React.Component {
  UNSAFE_componentWillMount() { }
  UNSAFE_componentWillUpdate(nextProps, nextState) { }
  UNSAFE_componentWillReceiveProps(nextProps) { }
}

sort-jsx-props​

info

Source | Report an issue

Usage $ codeshift --packages react#sort-jsx-props path/to/source

Sort props of JSX Components alphabetically.

Credit: https://github.com/reactjs/react-codemod

/* INPUT */
<Music
  zootWoman={true}
  rickJames={true}
  zapp={true}
/>

/* OUTPUT */
<Music
  rickJames={true}
  zapp={true}
  zootWoman={true}
/>

If a component uses spread props all properties before and after will be sorted, leaving the spread operation in place.

/* INPUT */
<Music
  zootWoman={true}
  alpha
  {...foo}
  zapp={true}
  rickJames={true}
/>

/* OUTPUT */
<Music
  alpha
  zootWoman={true}
  {...foo}
  rickJames={true}
  zapp={true}
/>

use-string-literal-props​

info

Source | Report an issue

Usage $ codeshift --packages react#use-string-literal-props path/to/source

Convert JSX props which are expressions for a string literal, into just a string literal.

Credit: https://github.com/reactjs/react-codemod

/* INPUT */
const SomeComponent = () => (
  <AnotherComponent
    foo={'string'}
    label={`template with 0 substitutions`}
    whatever={`template with ${1} substitution`}
  />
);

/* OUTPUT */
const SomeComponent = () => (
  <AnotherComponent
    foo="string"
    label="template with 0 substitutions"
    whatever={`template with ${1} substitution`}
  />
);