Change React component prop value
org.openrewrite.react.migration.change-component-prop-value
Changes literal prop values on React components. Useful for library upgrades where prop values were renamed (e.g., Material-UI, Ant Design).
Recipe source
This recipe is only available to users of Moderne.
This recipe is available under the Moderne Proprietary License.
Options
| Type | Name | Description | Example |
|---|---|---|---|
null | componentName | The name of the React component to target | Button |
null | propName | The name of the prop whose value should be changed | variant |
null | oldValue | 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. | outlined |
null | newValue | The new value to replace with. Can use $1, $2, etc. to reference capture groups if regex is true. | outlined-primary |
null | regex | Optional. If true, oldValue is interpreted as a regex pattern. Capture groups can be referenced in newValue using $1, $2, etc. |
Usage
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