Awesome
React Codemods
This repository contains a collection of codemods to help update React apps.
All codemods, whether you use the codemod
CLI command or react-codemod
, are free and open source, with the source code available in this repository.
Usage
We recommend using the codemod
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
Check codemod docs for the full list of available commands.
For the legacy react-codemod
command, see LEGACY.md.
Available Codemods
All React codemods are also available in the Codemod Registry.
remove-context-provider
Converts Context.Provider
JSX opening and closing elements into Context
.
npx codemod react/19/remove-context-provider --target <path>
remove-forward-ref
Removes usages of forwardRef
.
npx codemod react/19/remove-forward-ref --target <path>
use-context-hook
Replaces usages of React.useContext(...)
with React.use(...)
.
npx codemod react/19/use-context-hook --target <path>
replace-act-import
Updates act
import path from react-dom/test-utils
to react
.
npx codemod react/19/replace-act-import --target <path>
replace-string-ref
Replaces deprecated string refs with callback refs.
npx codemod react/19/replace-string-ref --target <path>
replace-use-form-state
Replaces usages of useFormState() to use useActionState().
npx codemod react/19/replace-use-form-state --target <path>
replace-reactdom-render
Replaces usages of ReactDom.render() with createRoot(node).render().
npx codemod react/19/replace-reactdom-render --target <path>
create-element-to-jsx
Converts calls to React.createElement
into JSX elements.
npx codemod react/create-element-to-jsx --target <path>
error-boundaries
Renames the experimental unstable_handleError
lifecycle hook to componentDidCatch
.
npx codemod react/error-boundaries --target <path>
findDOMNode
Updates this.getDOMNode()
or this.refs.foo.getDOMNode()
calls inside of
React.createClass
components to React.findDOMNode(foo)
. Note that it will
only look at code inside of React.createClass
calls and only update calls on
the component instance or its refs. You can use this script to update most calls
to getDOMNode
and then manually go through the remaining calls.
npx codemod react/findDOMNode --target <path>
manual-bind-to-arrow
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>
pure-component
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 to
function
by default. - Destructure props?: will destructure props in the argument where it is safe to do so.
npx codemod react/pure-component --target <path>
pure-render-mixin
Removes PureRenderMixin
and inlines shouldComponentUpdate
so that the ES2015
class transform can pick up the React component and turn it into an ES2015
class. NOTE: This currently only works if you are using the master version
(>0.13.1) of React as it is using React.addons.shallowCompare
npx codemod react/pure-render-mixin --target <path>
- The wizard will ask to optionally override
mixin-name
, and look for it instead ofPureRenderMixin
. Note that it is not possible to use a namespaced name for the mixin.mixins: [React.addons.PureRenderMixin]
will not currently work.
React-PropTypes-to-prop-types
Replaces React.PropTypes
references with prop-types
and adds the appropriate import
or require
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 the
prop-types
NPM package.
rename-unsafe-lifecycles
Adds UNSAFE_
prefix for deprecated lifecycle hooks. (For more information about this codemod, see React RFC #6)
npx codemod react/rename-unsafe-lifecycles --target <path>
react-to-react-dom
Updates code for the split of the react
and react-dom
packages (e.g.,
React.render
to ReactDOM.render
). It looks for require('react')
and
replaces the appropriate property accesses using require('react-dom')
. It does
not support ES6 modules or other non-CommonJS systems. We recommend performing
the findDOMNode
conversion first.
npx codemod react/react-to-react-dom --target <path>
- After running the automated codemod, you may want to run a regex-based
find-and-replace to remove extra whitespace between the added requires, such
as
codemod.py -m -d src --extensions js '(var React\s*=\s*require\(.react.\);)\n\n(\s*var ReactDOM)' '\1\n\2'
using https://github.com/facebook/codemod.
React-DOM-to-react-dom-factories
Converts calls like React.DOM.div(...)
to React.createElement('div', ...)
.
npx codemod react/React-DOM-to-react-dom-factories --target <path>
ReactNative-View-propTypes
Replaces View.propTypes
references with ViewPropTypes
and adds the appropriate import
or require
statement. This codemod is intended for ReactNative 44+.
npx codemod react/ReactNative-View-propTypes --target <path>
update-react-imports
As of Babel 7.9.0, when using runtime: 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 like
import * as React
will also be converted. By default, it's false, so only default imports (import React
) are converted.
npx codemod react/update-react-imports --target <path>
Support and Contributing
The scripts in this repository are maintained by the React team in collaboration with the Codemod.com team.
If you want to contribute, you're welcome to submit a pull request.
License
react-codemod is MIT licensed.