You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+68Lines changed: 68 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -144,6 +144,74 @@ export const C = props => {
144
144
};
145
145
```
146
146
147
+
## Configuration
148
+
149
+
### Disabling transformation
150
+
151
+
Adding to the class a comment including `react-declassify-disable` will disable transformation of that class.
152
+
153
+
```js
154
+
/* react-declassify-disable */
155
+
classMyComponentextendsReact.Component {}
156
+
```
157
+
158
+
Marking the component class as `abstract` or `/** @abstract */` also disables transformation.
159
+
160
+
### Import style
161
+
162
+
The codemod follows your import style from the `extends` clause. So
163
+
164
+
```js
165
+
importReactfrom"react";
166
+
167
+
classMyComponentextendsReact.Component {}
168
+
```
169
+
170
+
is transformed to
171
+
172
+
```js
173
+
importReactfrom"react";
174
+
175
+
const MyComponent:React.FC= () => {};
176
+
```
177
+
178
+
whereas
179
+
180
+
```js
181
+
import { Component } from"react";
182
+
183
+
classMyComponentextendsComponent {}
184
+
```
185
+
186
+
is transformed to
187
+
188
+
```js
189
+
import { Component, FC } from"react";
190
+
191
+
const MyComponent:FC= () => {};
192
+
```
193
+
194
+
It cannot be configured to mix these styles. For example it cannot emit `React.FC` for typing while emitting `useState` (not `React.useState`) for hooks.
195
+
196
+
### Receiving refs
197
+
198
+
Class components may receive refs; this is to be supported in the future. Once it is implemented, you will be able to add special directives in the component to enable the feature.
199
+
200
+
### Syntactic styles
201
+
202
+
This codemod relies on [recast](https://github.com/benjamn/recast) for pretty-printing and sometimes generates code that does not match your preferred style. This is ineviable. For example it does not currently emit parentheses for the arrow function:
203
+
204
+
```js
205
+
const MyComponent:FC=props=> {
206
+
// ^^^^^ no parentheses
207
+
// ...
208
+
};
209
+
```
210
+
211
+
We have no control over this choice. Even if it were possible, allowing configurations on styles would make the codemod unnecessarily complex.
212
+
213
+
If you need to enforce specific styles, use Prettier or ESLint or whatever is your favorite to reformat the code after you apply the transformation.
0 commit comments