@codemod/mui-gridlist-to-grid-migration

Name: mui-gridlist-to-grid-migration codemod
Availability: InStock

Replace deprecated GridList/GridListTile usage with modern Material UI Grid composition, including import rewrites and prop mapping, to improve maintainability and alignment with current MUI best practices.

Usage

bash

What It Rewrites

GridList becomes Grid with the container prop.
GridListTile becomes Grid with the item prop.
cols is mapped to xs using a 12-column grid calculation.
Numeric spacing values are converted from pixel gaps to MUI Grid spacing units by dividing by 8 and rounding.
Expression-based spacing values are rewritten to Math.round(expr / 8) so Grid still receives scale units instead of pixel values.
Legacy GridList, GridListTile, and GridListTileBar imports are removed, and a Grid import is added when needed.
The migration always targets @mui/material/Grid; it does not expose mode flags for alternate import targets or helper emission.

Supported Inputs

Default imports such as @material-ui/core/GridList and @material-ui/core/GridListTile
Named imports such as import { GridList, GridListTile } from '@material-ui/core'
Aliased named imports such as GridList as LegacyGridList
JavaScript, JSX, TypeScript, and TSX files
Nested GridList blocks, which are transformed independently with their own cols mapping

Preserved Behavior

Non-layout props such as className, style, id, key, data-*, and event handlers are preserved.
Existing Grid imports are reused instead of duplicated.
Locally shadowed GridList identifiers are not transformed.

Manual Follow-Up

rows has no direct Grid equivalent. The codemod leaves a TODO comment on migrated tiles that used it.
GridListTileBar is replaced with a TODO comment for manual migration to ImageListItemBar or an app-specific overlay.
cellHeight is not recreated automatically. Files using that prop are left unchanged for manual review.

Development

bash

License

MIT

1 import { GridList, GridListTile } from '@material-ui/core';
2
3 export const Example = ({ gap }: { gap: number }) => (
4 <GridList cols={4} spacing={gap} className="gallery">
5 <GridListTile>
6 <img src="a" />
7 </GridListTile>
8 </GridList>
9 );
10

Registry

Ready to contribute?

codemod/mui-gridlist-to-grid-migration

Run locally