React Codemods

This repository contains the public JSSG codemods for React migrations and cleanup work.

All codemods are free and open source, with the source code available in this repository.

Usage

npx codemod <codemod-name> --target <path>

• <codemod-name> — name of the codemod (see available codemods below)
• <path> — files or directory to transform

Check Codemod docs for the full list of available commands.

Available Codemods

All React codemods are also available in the Codemod Registry.

react-19-migration-recipe

Runs all React 19 migration codemods in sequence.

npx codemod @react-new/react-19-migration-recipe --target <path>

See @react-new/react-19-migration-recipe.

use-context-hook

Replaces usages of React.useContext(...) with React.use(...).

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

See @react-new/use-context-hook.

replace-act-import

Updates act import path from react-dom/test-utils to react.

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

See @react-new/replace-act-import.

replace-string-ref

Replaces deprecated string refs with callback refs.

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

See @react-new/replace-string-ref.

replace-use-form-state

Replaces usages of useFormState() with useActionState().

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

See @react-new/replace-use-form-state.

replace-reactdom-render

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

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

See @react-new/replace-reactdom-render.

react-proptypes-to-prop-types

Replaces React.PropTypes references with the prop-types package and adds the appropriate import statement.

npx codemod @react-new/react-proptypes-to-prop-types --target <path>

See @react-new/react-proptypes-to-prop-types.

Additional useful React codemods

• create-element-to-jsx
• error-boundaries
• find-dom-node
• manual-bind-to-arrow
• pure-component
• pure-render-mixin
• react-dom-to-react-dom-factories
• react-native-view-prop-types
• react-to-react-dom
• remove-context-provider
• remove-forward-ref
• rename-unsafe-lifecycles
• sort-comp
• update-react-imports

Development

pnpm install
pnpm run ci

Run tests:

pnpm test

Run type checking:

pnpm run check-types

Support and Contributing

If you want to contribute, see CONTRIBUTING.md.