{"id":13414196,"url":"https://github.com/reactjs/react-codemod","last_synced_at":"2025-05-13T20:12:52.508Z","repository":{"id":41156350,"uuid":"44563064","full_name":"reactjs/react-codemod","owner":"reactjs","description":"React codemod scripts","archived":false,"fork":false,"pushed_at":"2024-05-20T21:07:35.000Z","size":1093,"stargazers_count":4317,"open_issues_count":48,"forks_count":294,"subscribers_count":61,"default_branch":"master","last_synced_at":"2025-04-28T10:56:02.885Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-10-19T20:47:22.000Z","updated_at":"2025-04-28T09:06:12.000Z","dependencies_parsed_at":"2023-01-25T19:46:33.797Z","dependency_job_id":"2cb80460-687e-4cd4-a525-b71154ea67b2","html_url":"https://github.com/reactjs/react-codemod","commit_stats":{"total_commits":210,"total_committers":68,"mean_commits":3.088235294117647,"dds":0.9380952380952381,"last_synced_commit":"b34b92a1f0b8ad333efe5effb50d17d46d66588b"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-codemod","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-codemod/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-codemod/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactjs%2Freact-codemod/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactjs","download_url":"https://codeload.github.com/reactjs/react-codemod/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254020615,"owners_count":22000755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T21:00:16.349Z","updated_at":"2025-05-13T20:12:52.488Z","avatar_url":"https://github.com/reactjs.png","language":"JavaScript","readme":"## React Codemods [![Build Status](https://travis-ci.org/reactjs/react-codemod.svg)](https://travis-ci.org/reactjs/react-codemod)\n\nThis repository contains a collection of codemods to help update React apps.\n\nAll codemods, whether you use the `codemod` CLI command or `react-codemod`, are free and open source, with the source code available in this repository.\n\n### Usage\n\nWe recommend using the [`codemod`](https://go.codemod.com/github) command for an enhanced experience and better support.\n\n`npx codemod \u003cframework\u003e/\u003cversion\u003e/\u003ctransform\u003e --target \u003cpath\u003e [...options]`\n* `transform` - name of transform, see available transforms below.\n* `path` - directory to transform\n\nCheck [codemod docs](https://go.codemod.com/cli-docs) for the full list of available commands.\n\nFor the legacy `react-codemod` command, see [LEGACY.md](https://github.com/reactjs/react-codemod/blob/master/LEGACY.md).\n\n## Available Codemods\n\nAll React codemods are also available in the [Codemod Registry](https://go.codemod.com/react-codemods).\n\n#### `remove-context-provider`\n\nConverts `Context.Provider` JSX opening and closing elements into `Context`.\n\n```sh\nnpx codemod react/19/remove-context-provider --target \u003cpath\u003e\n```\n\n#### `remove-forward-ref`\n\nRemoves usages of `forwardRef`.\n\n```sh\nnpx codemod react/19/remove-forward-ref --target \u003cpath\u003e\n```\n\n#### `use-context-hook`\n\nReplaces usages of `React.useContext(...)` with `React.use(...)`.\n\n```sh\nnpx codemod react/19/use-context-hook --target \u003cpath\u003e\n```\n\n#### `replace-act-import`\n\nUpdates `act` import path from `react-dom/test-utils` to `react`.\n\n```sh\nnpx codemod react/19/replace-act-import --target \u003cpath\u003e\n```\n\n#### `replace-string-ref`\n\nReplaces deprecated string refs with callback refs.\n\n```sh\nnpx codemod react/19/replace-string-ref --target \u003cpath\u003e\n```\n\n#### `replace-use-form-state`\n\nReplaces usages of useFormState() to use useActionState().\n\n```sh\nnpx codemod react/19/replace-use-form-state --target \u003cpath\u003e\n```\n\n#### `replace-reactdom-render`\n\nReplaces usages of ReactDom.render() with createRoot(node).render().\n\n```sh\nnpx codemod react/19/replace-reactdom-render --target \u003cpath\u003e\n```\n\n#### `create-element-to-jsx`\n\nConverts calls to `React.createElement` into JSX elements.\n\n```sh\nnpx codemod react/create-element-to-jsx --target \u003cpath\u003e\n```\n\n#### `error-boundaries`\n\nRenames the experimental `unstable_handleError` lifecycle hook to `componentDidCatch`.\n\n```sh\nnpx codemod react/error-boundaries --target \u003cpath\u003e\n```\n\n#### `findDOMNode`\n\nUpdates `this.getDOMNode()` or `this.refs.foo.getDOMNode()` calls inside of\n`React.createClass` components to `React.findDOMNode(foo)`. Note that it will\nonly look at code inside of `React.createClass` calls and only update calls on\nthe component instance or its refs. You can use this script to update most calls\nto `getDOMNode` and then manually go through the remaining calls.\n\n```sh\nnpx codemod react/findDOMNode --target \u003cpath\u003e\n```\n\n#### `manual-bind-to-arrow`\n\nConverts manual function bindings in a class (e.g., `this.f = this.f.bind(this)`) to arrow property initializer functions (e.g., `f = () =\u003e {}`).\n\n```sh\nnpx codemod react/manual-bind-to-arrow --target \u003cpath\u003e\n```\n\n#### `pure-component`\n\nConverts ES6 classes that only have a render method, only have safe properties\n(statics and props), and do not have refs to Functional Components.\n\nThe wizard will ask for 2 options -\n\n* **Use arrow functions?**: converts to arrow function. Converts to `function` by default.\n* **Destructure props?**: will destructure props in the argument where it is safe to do so.\n\n```sh\nnpx codemod react/pure-component --target \u003cpath\u003e\n```\n\n#### `pure-render-mixin`\n\nRemoves `PureRenderMixin` and inlines `shouldComponentUpdate` so that the ES2015\nclass transform can pick up the React component and turn it into an ES2015\nclass. NOTE: This currently only works if you are using the master version\n(\u003e0.13.1) of React as it is using `React.addons.shallowCompare`\n\n```sh\nnpx codemod react/pure-render-mixin --target \u003cpath\u003e\n```\n\n  * The wizard will ask to optionally override `mixin-name`, and look for it\n   instead of `PureRenderMixin`. Note that it is not possible to use a\n   namespaced name for the mixin. `mixins: [React.addons.PureRenderMixin]` will\n   not currently work.\n\n#### `React-PropTypes-to-prop-types`\n\nReplaces `React.PropTypes` references with `prop-types` and adds the appropriate `import` or `require` statement. This codemod is intended for React 15.5+.\n\n```sh\nnpx codemod react/React-PropTypes-to-prop-types --target \u003cpath\u003e\n```\n\n  * In addition to running the above codemod you will also need to install the `prop-types` NPM package.\n\n#### `rename-unsafe-lifecycles`\n\nAdds `UNSAFE_` prefix for deprecated lifecycle hooks. (For more information about this codemod, see [React RFC #6](https://github.com/reactjs/rfcs/pull/6))\n\n```sh\nnpx codemod react/rename-unsafe-lifecycles --target \u003cpath\u003e\n```\n\n#### `react-to-react-dom`\n\nUpdates code for the split of the `react` and `react-dom` packages (e.g.,\n`React.render` to `ReactDOM.render`). It looks for `require('react')` and\nreplaces the appropriate property accesses using `require('react-dom')`. It does\nnot support ES6 modules or other non-CommonJS systems. We recommend performing\nthe `findDOMNode` conversion first.\n\n```sh\nnpx codemod react/react-to-react-dom --target \u003cpath\u003e\n```\n\n  * After running the automated codemod, you may want to run a regex-based\n    find-and-replace to remove extra whitespace between the added requires, such\n    as `codemod.py -m -d src --extensions js '(var\n    React\\s*=\\s*require\\(.react.\\);)\\n\\n(\\s*var ReactDOM)' '\\1\\n\\2'` using\n    https://github.com/facebook/codemod.\n\n#### `React-DOM-to-react-dom-factories`\n\nConverts calls like `React.DOM.div(...)` to `React.createElement('div', ...)`.\n\n```sh\nnpx codemod react/React-DOM-to-react-dom-factories --target \u003cpath\u003e\n```\n\n#### `ReactNative-View-propTypes`\n\nReplaces `View.propTypes` references with `ViewPropTypes` and adds the appropriate `import` or `require` statement. This codemod is intended for ReactNative 44+.\n\n```sh\nnpx codemod react/ReactNative-View-propTypes --target \u003cpath\u003e\n```\n\n#### `update-react-imports`\n\n[As of Babel 7.9.0](https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154-https-githubcom-babel-babel-pull-11154), 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'`).\n\nThe wizard will ask for 1 option -\n\n* **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.\n\n```sh\nnpx codemod react/update-react-imports --target \u003cpath\u003e\n```\n\n## Support and Contributing\n\nThe scripts in this repository are maintained by the React team in collaboration with the [Codemod.com](https://codemod.com) team.\n\nIf you want to contribute, you're welcome to submit a pull request.\n\n## License\n\nreact-codemod is [MIT licensed](./LICENSE).\n","funding_links":[],"categories":["JavaScript","By Environment","React","Frameworks","Table of Contents","Language Analysis"],"sub_categories":["JavaScript/TypeScript","React Components","React.js","Codemods","TypeScript / JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactjs%2Freact-codemod","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactjs%2Freact-codemod","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactjs%2Freact-codemod/lists"}