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.
# Shopify React Router Headers Export Codemod This is a [codemod](https://codemod.com) that automatically adds the required `headers` export to pages using `authenticate.admin()`. ## Using this codemod You can run this codemod with the following command: ```bash npx codemod shopify/react-router/headers-export ``` ### Before ```tsx import { authenticate } from "@shopify/admin-api-utils"; export async function loader({ request }) { await authenticate.admin(request); // ... } ``` ### After ```tsx import { authenticate } from "@shopify/admin-api-utils"; export async function loader({ request }) { await authenticate.admin(request); // ... } export const headers: HeadersFunction = (headersArgs) => { return boundary.headers(headersArgs); }; ```
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>; ```
# Remix to React Router This codemod automates most of the manual steps outlined in the Remix to React Router upgrade guide. https://github.com/remix-run/react-router/blob/dev/docs/upgrading/remix.md - It updates your dependencies from the @remix-run/* packages to react-router and @react-router/* packages in package.json. - It updates both static and dynamic imports from @remix-run/* and react-router-dom to react-router. - It handles moving removed imports from the host specific packages like @remix-run/architect, @remix-run/cloudflare etc and moving them to react-router. - It updates any vi.mock module calls to the correct package name. - It updates the scripts in your package.json if you are using the basic scripts from the Remix templates, otherwise it won't change the scripts. - It updates the import and renames the plugin in your vite.config.ts. - If you have an entry.server.tsx and/or an entry.client.tsx file in your application, it will update the main components and imports in these files, including renaming remixContext to reactRouterContext. - It renames your server file's server build import from virtual:remix/server-build to virtual:react-router/server-build. - It updates package names in compilerOptions.types in tsconfig.json files.
This codemod migrates `useHistory` to `useNavigate` in React Router codebases. It replaces `useHistory` imports and updates all instances of `history.push`, `history.replace`, `go`, `goBack`, and `goForward` to align with the `useNavigate` API. ### Before ```tsx import { useHistory } from "react-router-dom"; const history = useHistory(); history.push("/home"); history.replace("/login"); history.goBack(); ``` ### After ```tsx import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); navigate("/home"); navigate("/login", { replace: true }); navigate(-1); // Equivalent to goBack ``` This codemod simplifies the migration from `useHistory` to `useNavigate`, aligning your code with React Router's latest navigation hooks while preserving functionality.
This codemod updates `Switch` components to `Routes` in React Router, in line with React Router v6 and newer. It also adjusts the imports, replacing `Switch` with `Routes` in `react-router-dom` import statements. ### Before ```tsx import { BrowserRouter, Route, Switch } from "react-router-dom"; <Switch> <Route path="/home" element={<HomePage />} /> <Route path="/about" element={<AboutPage />} /> </Switch> ``` ### After ```tsx import { BrowserRouter, Route, Routes } from "react-router-dom"; <Routes> <Route path="/home" element={<HomePage />} /> <Route path="/about" element={<AboutPage />} /> </Routes> ``` This codemod modernizes routing logic by using `Routes` instead of `Switch`, aligning your code with the latest practices in React Router.
This codemod updates imports of `StaticRouter` to use the `react-router-dom/server` package instead of `react-router-dom`, in line with updated React Router requirements. ### Before ```tsx import { BrowserRouter, Route, StaticRouter } from "react-router-dom"; ``` ### After ```tsx import { BrowserRouter, Route } from "react-router-dom"; import { StaticRouter } from "react-router-dom/server"; ``` This codemod ensures compatibility with the latest React Router version by splitting `StaticRouter` imports into the correct package. Other imports from `react-router-dom` remain unaffected.
This codemod simplifies the `Link` component by transforming its `to` prop from an object with a `pathname` to a string. It removes the unnecessary object wrapper around the `pathname`, maintaining the `state` prop as is. ### Before ```tsx <Link to={{ pathname: "/home", state: { from: "/login" } }} /> ``` ### After ```tsx <Link to="/home" state={{ from: "/login" }} /> ``` This change enhances the readability of your `Link` components by using a more straightforward string representation for the `to` prop, aligning with current best practices in React Router.
This codemod updates `useRouteMatch` calls to the newer `useMatch` function in `react-router-dom`. It also adjusts any arguments passed to `useRouteMatch`, changing `strict` to `end` and `sensitive` to `caseSensitive`. Additionally, it ensures that imports are updated to reflect the removal of `useRouteMatch`. ### Before ```tsx import { useRouteMatch } from "react-router-dom"; const match = useRouteMatch({ path: "/home", strict: true, sensitive: false, }); ``` ### After ```tsx import { useMatch } from "react-router-dom"; const match = useMatch({ path: "/home", end: true, caseSensitive: false, }); ``` This codemod streamlines the use of route matching in your application, aligning with the latest React Router practices while ensuring existing functionality is preserved. It also removes any obsolete references to `useRouteMatch` in imports.
This codemod reorders the arguments in the `matchPath` function calls. It switches the position of the string path and the second callback argument, improving consistency and readability. ### Before ```tsx matchPath("/home", { exact: true }); ``` ### After ```tsx matchPath({ exact: true }, "/home"); ``` This change ensures that the string path is now the second argument, following the newer convention for using `matchPath`.
This codemod updates `NavLink` components that use separate `style` and `activeStyle` props to the modern `isActive` function in `react-router-dom`. It simplifies the logic by combining the two props into a single `style` prop with conditional styling. ### Before ```tsx <NavLink to="/home" style={{ color: 'blue' }} activeStyle={{ color: 'red' }}> Home </NavLink> ``` ### After ```tsx <NavLink to="/home" style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}> Home </NavLink> ``` This makes the component more concise and aligns it with the newer API for conditional styles based on the `isActive` property.
This codemod modernizes `Route` and `Link` components in React Router by: 1. Removing the deprecated `exact` prop from `Route`. 2. Updating `Route` to use the `element` prop. 3. Rewriting dynamic `Link` and `Route` paths that use template literals like `${match.url}` and `${match.path}`. ### Before ```tsx <Route exact path="/home"> <HomePage /> </Route> <Link to={`${match.url}/details`}>Details</Link> <Route path={`${match.path}/details`}> <DetailsPage /> </Route> ``` ### After ```tsx <Route path="/home" element={<HomePage />} /> <Link to="/details">Details</Link> <Route path="/details" element={<DetailsPage />} /> ``` This ensures your code is compatible with newer versions of React Router, which no longer use `exact` and prefer the `element` prop for components. It also simplifies dynamic path generation by removing `match` references.
This codemod updates deprecated `Redirect` components from `react-router-dom` to the modern `Navigate` API. It also updates the imports by replacing `Redirect` with `Navigate`. ### Before ```tsx import { Redirect, Route, Switch } from "react-router-dom"; <Redirect to="/home" />; <Redirect to="/home" push={true} />; ``` ### After ```tsx import { Navigate, Route, Switch } from "react-router-dom"; <Navigate to="/home" />; <Navigate to="/home" replace />; ``` This change ensures compatibility with newer versions of `react-router-dom` by using `Navigate` in place of `Redirect`.
Build your own codemod and share it with the community.