Moderne OnlyThis recipe is proprietary to Moderne and runs on the Moderne platform or CLI — it isn’t part of the open-source catalog. Available with a Moderne subscription.Contact Sales

Change React component prop value

Recipe IDorg.openrewrite.react.migration.change-component-prop-value

Artifactio.moderne.recipe:rewrite-react

Changes literal prop values on React components. Useful for library upgrades where prop values were renamed (e.g., Material-UI, Ant Design).

Single recipeOpenRewriteModerne Proprietary License

Try in PlatformTry this recipe in the Moderne platform. Not a user yet? You’ll get a no-setup demo environment, with nothing to install or configure.

Options

5 parameters

3 required2 optional

Parameter	Example	Type	Required
componentName	Button	String	Required
The name of the React component to target
newValue	outlined-primary	String	Required
The new value to replace with. Can use $1, $2, etc. to reference capture groups if regex is true.
propName	variant	String	Required
The name of the prop whose value should be changed
oldValue	outlined	String	Optional
The old value to match. If regex is true, interpreted as a regular expression pattern. Supports /pattern/flags format for specifying regex flags (e.g., /pattern/i for case-insensitive). If not provided, matches all values.
regex	—	String	Optional
If true, oldValue is interpreted as a regex pattern. Capture groups can be referenced in newValue using $1, $2, etc.

Usage

Run this recipe

In order to run JavaScript recipes, you will need to use the Moderne CLI. For JavaScript specific configuration instructions, please see our configuring JavaScript guide.

Once the CLI is installed, you can install this JavaScript recipe package by running the following command:

Install the recipe package

mod config recipes npm install @openrewrite/recipes-react

Then, you can run the recipe via:

Run the recipe

mod run . --recipe org.openrewrite.react.migration.change-component-prop-value