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.
Transform React class components to modern function components
Migrate from deprecated @lingui/macro to split @lingui/react/macro and @lingui/core/macro packages
No description available
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 }) { // ... }; ```
# styled-components-transient-props-codemod ## How to use? ```bash npx codemod styled-components-transient-props-codemod ```
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>; ```
## Example This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts const toReplace = "hello"; ``` ### After ```ts const replacement = "hello"; ```
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>; }; ```
Build your own codemod and share it with the community.