Assess, plan, evolve.

Transform React class components to modern function components

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>; }; ```

Transform React components using Material UI JSS APIs (e.g., makeStyles/withStyles/createStyles) into strongly typed `tss-react` hook-based styling (`makeStyles` from `tss-react/mui`) in TypeScript React codebases, improving maintainability and type safety while modernizing legacy styling patterns.

Replace React .map() index-as-key with stable keys (item.id) when verifiable, otherwise add TODO

Professional React Router v6 to v7 migration - 7 transforms, zero false positives

Automated codemod to migrate React Router v6 projects to v7. Handles import rewrites, future flags, RouterProvider fix, json/defer removal, fallbackElement migration, and formMethod casing.

Read-only React component inventory for Insights dashboards across JavaScript and TypeScript codebases

Automatically rewrite legacy Grid v2 props to the current Material UI Grid API for React projects using `@mui/material/Grid2`, `@mui/system/Grid`, or `@mui/joy/Grid`, including deterministic prop renames/removals and safe JSX cleanup.

Read-only React accessibility mining codemod for Cal.com Insights dashboards.

Migrate wagmi React hooks from v1 to v2

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>; ```

Detect expensive cross-boundary reads inside React render paths