New
Codemod Registry
Explore community-led codemods to migrate, optimize, and transform your codebase.
+600 codemods published
Ready to contribute?
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
React.forwardRef will be deprecated for Function Components in near future. This codemod removes forwardRef function. ### Before: ```jsx import { forwardRef } from "react"; const MyInput = forwardRef(function MyInput(props, ref) { // ... }); ``` ### After: ```tsx const MyInput = function MyInput({ ref, ...props }) { // ... }; ```
Moves HOC calls to the global scope ## Example ### Before ```ts <Router history={browserHistory}> <Switch> <Route path='/' render={(props) => ( <Route exact path='/a' component={HOC(PageComponent)} /> )} /> </Switch> </Router>; ``` ### After ```ts const HOCPageComponent = HOC(PageComponent); <Router history={browserHistory}> <Switch> <Route path='/' render={(props) => ( <Route exact path='/a' component={HOCPageComponent} /> )} /> </Switch> </Router>; ```
This codemod transforms React.createElement calls into JSX syntax, making your code more readable and maintainable. ## Example ### Before ```tsx return React.createElement( "div", { className: "container" }, React.createElement("h1", null, "Hello World"), React.createElement("p", { style: { color: "blue" } }, "Welcome to React") ); ``` ### After ```tsx return ( <div className="container"> <h1>Hello World</h1> <p style={{ color: "blue" }}>Welcome to React</p> </div> ); ```
This codemod transforms React imports to use named imports instead of default or namespace imports. This helps reduce bundle size by allowing better tree-shaking of unused React exports. ### Before ```tsx import React from "react"; function MyComponent() { return React.createElement( "div", null, React.createElement(React.Fragment, null, "Hello"), ); } ``` ### After ```tsx import { createElement, Fragment } from "react"; function MyComponent() { return createElement("div", null, createElement(Fragment, null, "Hello")); } ```
This recipe is a set of codemods that will fix some of React 19 breaking changes. The recipe includes the following codemods: - react/19/replace-reactdom-render - react/19/replace-string-ref - react/19/replace-act-import - react/19/replace-use-form-state - react/prop-types-typescript
Replaces deprecated `React.createFactory` method with JSX. ## Example ### Before ```tsx import { createFactory } from "react"; const route = createFactory(Route); ``` ### After ```tsx const route = <Route />; ```
This codemod removes `React.FC`, `React.FunctionComponent` and `React.SFC` and replaces the Props as the type of the unique argument in the component definition. This codemod supports: - Inline defined props. - Generics. - Props defined with intersection. - Component modules defined using intersection. - Regular named functions. - Functions that accept a component definition. - Using FC, FunctionComponent and SFC as a named export. ## Before: ```jsx type Props2 = { id: number }; export const MyComponent2: React.FC<Props2> = (props) => { return <span>{props.id}</span> } ``` ## After: ```tsx type Props2 = { id: number }; export const MyComponent2 = (props: Props2) => { return <span>{props.id}</span>; }; ```
Codemod to convert React PropTypes to TypeScript types. - Supports function and class components - Supports `static propTypes` declarations on class components - Supports [`forwardRef`s](https://reactjs.org/docs/forwarding-refs.html) - Supports files with multiple components - Copies JSDoc comments to the generated TypeScript types - Option to remove or preserve PropTypes after converting to TS ## Before: ```jsx import PropTypes from "prop-types"; import React from "react"; export function MyComponent(props) { return <span />; } MyComponent.propTypes = { bar: PropTypes.string.isRequired, foo: PropTypes.number, }; ``` ## After: ```tsx import React from "react"; interface MyComponentProps { bar: string; foo?: number; } export function MyComponent(props: MyComponentProps) { return <span />; } ```
This codemod will convert the usage of `useContext` to the new hook format, introduced in React v19. ## Example ### Before: ```tsx import { useContext } from "react"; import UseTheme from "./UseTheme"; const theme = useContext(UseTheme); ``` ### After: ```tsx import { use } from "react"; import UseTheme from "./UseTheme"; const theme = use(UseTheme); ```
This codemod will replace the usages of `useFormState()` to use `useActionState()`, introduced in React v19. ## Example ### Before: ```ts import { useFormState } from "react-dom"; async function increment(previousState, formData) { return previousState + 1; } function StatefulForm({}) { const [state, formAction] = useFormState(increment, 0); return ( <form> {state} <button formAction={formAction}>Increment</button> </form> ) } ``` ### After: ```ts import { useActionState } from "react"; async function increment(previousState, formData) { return previousState + 1; } function StatefulForm({}) { const [state, formAction] = useActionState(increment, 0); return ( <form> {state} <button formAction={formAction}>Increment</button> </form> ) } ``` ### Before: ```ts import * as ReactDOM from "react-dom"; function StatefulForm({}) { const [state, formAction] = ReactDOM.useFormState(increment, 0); return <form></form>; } ``` ### After: ```ts import { useActionState } from "react"; function StatefulForm({}) { const [state, formAction] = useActionState(increment, 0); return <form></form>; } ```
This codemod migrates string refs (deprecated) to callback refs. ## Example ### Before: ```ts < div ref = 'refName' / > ; ``` ### After: ```ts < div ref = { ref => this.refs.refName = ref } /> ```
- Replaces usages of `ReactDom.render()` with `createRoot(node).render()`. - Replaces usages of `ReactDom.hydrate()` with `hydrateRoot()` - Replaces usages of `ReactDom.unmountComponentAtNode()` with `root.unmount()` ## Example ### Before ```ts import ReactDom from "react-dom"; import Component from "Component"; ReactDom.render(<Component />, document.getElementById('app')); ``` ### After ```ts import { createRoot } from "react-dom/client"; import ReactDom from "react-dom"; import Component from "Component"; const root = createRoot(document.getElementById('app')); root.render(<Component />); ``` ### Before ```ts import ReactDom from "react-dom"; import Component from "Component"; ReactDom.hydrate(<Component />, document.getElementById("app")); ``` ### After ```ts import { hydrateRoot } from "react-dom/client"; import ReactDom from "react-dom"; import Component from "Component"; hydrateRoot(document.getElementById("app"), <Component />); ```
Build your own codemod and share it with the community.
