Repository files navigation

This repository contains a collection of codemods to help update React apps.

All codemods, whether you use thecodemod CLI command orreact-codemod, are free and open source, with the source code available in this repository.

We recommend using thecodemod command for an enhanced experience and better support.

npx codemod <framework>/<version>/<transform> --target <path> [...options]

• transform - name of transform, see available transforms below.
• path - directory to transform

Checkcodemod docs for the full list of available commands.

For the legacyreact-codemod command, seeLEGACY.md.

All React codemods are also available in theCodemod Registry.

ConvertsContext.Provider JSX opening and closing elements intoContext.

npx codemod react/19/remove-context-provider --target<path>

Removes usages offorwardRef.

npx codemod react/19/remove-forward-ref --target<path>

Replaces usages ofReact.useContext(...) withReact.use(...).

npx codemod react/19/use-context-hook --target<path>

Updatesact import path fromreact-dom/test-utils toreact.

npx codemod react/19/replace-act-import --target<path>

Replaces deprecated string refs with callback refs.

npx codemod react/19/replace-string-ref --target<path>

Replaces usages of useFormState() to use useActionState().

npx codemod react/19/replace-use-form-state --target<path>

Replaces usages of ReactDom.render() with createRoot(node).render().

npx codemod react/19/replace-reactdom-render --target<path>

Converts calls toReact.createElement into JSX elements.

npx codemod react/create-element-to-jsx --target<path>

Renames the experimentalunstable_handleError lifecycle hook tocomponentDidCatch.

npx codemod react/error-boundaries --target<path>

Updatesthis.getDOMNode() orthis.refs.foo.getDOMNode() calls inside ofReact.createClass components toReact.findDOMNode(foo). Note that it willonly look at code inside ofReact.createClass calls and only update calls onthe component instance or its refs. You can use this script to update most callstogetDOMNode and then manually go through the remaining calls.

npx codemod react/findDOMNode --target<path>

Converts manual function bindings in a class (e.g.,this.f = this.f.bind(this)) to arrow property initializer functions (e.g.,f = () => {}).

npx codemod react/manual-bind-to-arrow --target<path>

Converts ES6 classes that only have a render method, only have safe properties(statics and props), and do not have refs to Functional Components.

The wizard will ask for 2 options -

• Use arrow functions?: converts to arrow function. Converts tofunction by default.
• Destructure props?: will destructure props in the argument where it is safe to do so.

npx codemod react/pure-component --target<path>

RemovesPureRenderMixin and inlinesshouldComponentUpdate so that the ES2015class transform can pick up the React component and turn it into an ES2015class. NOTE: This currently only works if you are using the master version(>0.13.1) of React as it is usingReact.addons.shallowCompare

npx codemod react/pure-render-mixin --target<path>

• The wizard will ask to optionally overridemixin-name, and look for itinstead ofPureRenderMixin. Note that it is not possible to use anamespaced name for the mixin.mixins: [React.addons.PureRenderMixin] willnot currently work.

ReplacesReact.PropTypes references withprop-types and adds the appropriateimport orrequire statement. This codemod is intended for React 15.5+.

npx codemod react/React-PropTypes-to-prop-types --target<path>

• In addition to running the above codemod you will also need to install theprop-types NPM package.

AddsUNSAFE_ prefix for deprecated lifecycle hooks. (For more information about this codemod, seeReact RFC #6)

npx codemod react/rename-unsafe-lifecycles --target<path>

Updates code for the split of thereact andreact-dom packages (e.g.,React.render toReactDOM.render). It looks forrequire('react') andreplaces the appropriate property accesses usingrequire('react-dom'). It doesnot support ES6 modules or other non-CommonJS systems. We recommend performingthefindDOMNode conversion first.

npx codemod react/react-to-react-dom --target<path>

• After running the automated codemod, you may want to run a regex-basedfind-and-replace to remove extra whitespace between the added requires, suchascodemod.py -m -d src --extensions js '(var React\s*=\s*require\(.react.\);)\n\n(\s*var ReactDOM)' '\1\n\2' usinghttps://github.com/facebook/codemod.

Converts calls likeReact.DOM.div(...) toReact.createElement('div', ...).

npx codemod react/React-DOM-to-react-dom-factories --target<path>

ReplacesView.propTypes references withViewPropTypes and adds the appropriateimport orrequire statement. This codemod is intended for ReactNative 44+.

npx codemod react/ReactNative-View-propTypes --target<path>

As of Babel 7.9.0, when usingruntime: automatic in@babel/preset-react or@babel/plugin-transform-react-jsx, you will not need to explicitly import React for compiling jsx. This codemod removes the redundant import statements. It also converts default imports (import React from 'react') to named imports (e.g.import { useState } from 'react').

The wizard will ask for 1 option -

• Destructure namespace imports as well?: If chosen,namespace imports likeimport * as React willalso be converted. By default, it's false, so only default imports (import React) are converted.

npx codemod react/update-react-imports --target<path>

The scripts in this repository are maintained by the React team in collaboration with theCodemod.com team.

If you want to contribute, you're welcome to submit a pull request.

react-codemod isMIT licensed.