11## react-codemod [ ![ Build Status] ( https://travis-ci.org/reactjs/react-codemod.svg )] ( https://travis-ci.org/reactjs/react-codemod )
22
3- This repository contains a collection of codemod scripts for use with
4- [ JSCodeshift] ( https://github.com/facebook/jscodeshift ) that help update React
5- APIs.
3+ This repository contains a collection of codemods to help update React apps.
64
75### Usage
6+ There are two supported ways to run React codemods:
7+ - ` codemod ` : enhanced codemod support from [ codemod.com] ( https://codemod.com ) available via CLI or the [ VSCode Extension] ( https://go.codemod.com/vsce ) .
8+ - ` react-codemod ` : basic codemod support using [ JSCodeshift] ( https://github.com/facebook/jscodeshift ) .
9+
10+ The ` codemod.com ` team maintains many of the codemods listed here, and all codemods are free and Open Source whether you use the ` codemod ` command or ` react-codemod ` .
11+
12+ #### Running with ` codemod ` CLI
13+ ` npx codemod <framework>/<version>/<transform> --target <path> [...options] `
14+ * ` transform ` - name of transform, see available transforms below.
15+ * ` path ` - directory to transform
16+
17+ Check [ codemod docs] ( https://go.codemod.com/cli-docs] ) for the full list of available commands.
18+
19+ #### Running with ` react-codemod `
820` npx react-codemod <transform> <path> [...options] `
921 * ` transform ` - name of transform, see available transforms below.
1022 * ` path ` - files or directory to transform
1123 * use the ` --dry ` option for a dry-run and use ` --print ` to print the output for comparison
1224
1325This will start an interactive wizard, and then run the specified transform.
14- #### Running with ` codemod ` CLI
15- ` npx codemod <framework>/<version>/<transform> --target <path> [...options] `
16- * ` transform ` - name of transform, see available transforms below.
17- * ` path ` - directory to transform
18-
19- Check [ codemod docs] ( https://go.codemod.com/cli-docs] ) for the full list of available commands.
2026
2127### Included Transforms
2228
2329#### ` remove-context-provider `
2430
2531Converts ` Context.Provider ` JSX opening and closing elements into ` Context ` .
2632
27- Run with ` react-codemod ` CLI for basic experience:
28-
33+ ` codemod ` :
2934``` sh
30- npx react- codemod remove-context-provider < path>
35+ npx codemod react/19/ remove-context-provider --target < path>
3136```
3237
33- or use ` codemod ` CLI for better experience and support:
34-
38+ ` react-codemod ` :
3539``` sh
36- npx codemod react/19/ remove-context-provider --target < path>
40+ npx react- codemod remove-context-provider < path>
3741```
3842
3943#### ` remove-forward-ref `
4044
4145Removes usages of ` forwardRef ` .
4246
43- Run with ` react-codemod ` CLI for basic experience:
44-
47+ ` codemod ` :
4548``` sh
46- npx react- codemod remove-forward-ref < path>
49+ npx codemod react/19/ remove-forward-ref --target < path>
4750```
4851
49- or use ` codemod ` CLI for better experience and support:
50-
52+ ` react-codemod ` :
5153``` sh
52- npx codemod react/19/ remove-forward-ref --target < path>
54+ npx react- codemod remove-forward-ref < path>
5355```
5456
5557#### ` remove-memoization-hooks `
5658
5759Removes usages of ` useCallback ` , ` useMemo ` and ` memo ` .
5860
59- Run with ` react- codemod` CLI for basic experience :
61+ ` codemod ` :
6062
6163``` sh
62- npx react- codemod remove-memoization-hooks < path>
64+ npx codemod react/19/ remove-memoization-hooks --target < path>
6365```
6466
65- or use ` codemod ` CLI for better experience and support:
66-
67+ ` react-codemod ` :
6768``` sh
68- npx codemod react/19/ remove-memoization-hooks --target < path>
69+ npx react- codemod remove-memoization-hooks < path>
6970```
7071
7172#### ` use-context-hook `
7273
7374Replaces usages of ` React.useContext(...) ` with ` React.use(...) ` .
7475
75- Run with ` react- codemod` CLI for basic experience :
76+ ` codemod ` :
7677
7778``` sh
78- npx react- codemod use-context-hook < path>
79+ npx codemod react/19/ use-context-hook --target < path>
7980```
8081
81- or use ` codemod ` CLI for better experience and support :
82+ ` react- codemod` :
8283
8384``` sh
84- npx codemod react/19/ use-context-hook --target < path>
85+ npx react- codemod use-context-hook < path>
8586```
8687
8788#### ` replace-act-import `
8889
8990Updates ` act ` import path from ` react-dom/test-utils ` to ` react ` .
9091
91- Run with ` react-codemod ` CLI for basic experience:
92-
92+ ` codemod ` :
9393``` sh
94- npx react- codemod replace-act-import < path>
94+ npx codemod react/19/ replace-act-import --target < path>
9595```
9696
97- or use ` codemod ` CLI for better experience and support:
98-
97+ ` react-codemod ` :
9998``` sh
100- npx codemod react/19/ replace-act-import --target < path>
99+ npx react- codemod replace-act-import < path>
101100```
102101
103102#### ` replace-string-ref `
104103
105104Replaces deprecated string refs with callback refs.
106105
107- Run with ` react-codemod ` CLI for basic experience:
108-
106+ ` codemod ` :
109107``` sh
110- npx react- codemod replace-string-ref < path>
108+ npx codemod react/19/ replace-string-ref --target < path>
111109```
112110
113- or use ` codemod ` CLI for better experience and support:
114-
111+ ` react-codemod ` :
115112``` sh
116- npx codemod react/19/ replace-string-ref --target < path>
113+ npx react- codemod replace-string-ref < path>
117114```
118115
119116#### ` replace-use-form-state `
120117
121118Replaces usages of useFormState() to use useActionState().
122119
123- Run with ` react-codemod ` CLI for basic experience:
124-
120+ ` codemod ` :
125121``` sh
126- npx react- codemod replace-use-form-state < path>
122+ npx codemod react/19/ replace-use-form-state --target < path>
127123```
128124
129- or use ` codemod ` CLI for better experience and support:
130-
125+ ` react-codemod ` :
131126``` sh
132- npx codemod react/19/ replace-use-form-state --target < path>
127+ npx react- codemod replace-use-form-state < path>
133128```
134129
135130#### ` create-element-to-jsx `
@@ -313,10 +308,8 @@ npx react-codemod update-react-imports <path>
313308 - Adds a ` require ` or ` import ` statement for ` create-react-class ` . The import style is inferred from the import style of the ` react ` import. The default module name can be overridden with the ` --create-class-module-name ` option.
314309 - Prunes the ` react ` import if there are no more references to it.
315310
316- #### Usage
317- ``` bash
318- npx react-codemod class < path>
319- ```
311+
312+ ## ` react-codemod ` options
320313
321314### jscodeshift options
322315
@@ -336,11 +329,15 @@ through jscodeshift's `printOptions` command line argument
336329npx react-codemod < transform> < path> --jscodeshift=" --printOptions='{\" quote\" :\" double\" }'"
337330```
338331
339- #### ` explicit-require=false `
332+ ### ` explicit-require=false `
340333
341334If you're not explicitly importing React in your files (eg: if you're loading React with a script tag), you should add ` --explicit-require=false ` .
342335
343- ### Support and Contributing
336+ ## ` codemod ` options
337+
338+ Check [ codemod docs] ( https://go.codemod.com/cli-docs] ) for the full list of available options.
339+
340+ ## Support and Contributing
344341
345342The scripts in this repository are provided in the hope that they are useful,
346343but they are not officially maintained, and we generally will not fix
@@ -350,7 +347,6 @@ rely on community contributions to fix any issues discovered or make any
350347improvements. If you want to contribute, you're welcome to submit a pull
351348request.
352349
353- ### License
354-
350+ ## License
355351
356352react-codemod is [ MIT licensed] ( ./LICENSE ) .
0 commit comments