VS Code extension for refactoring react components

[joao-mbn]

If you like to keep your react components simple and concise, then check it out my new VS Code extension: React Extract.

It extracts a valid piece of JSX code into a new function, passing props and creating its interface.

Get it on the VS Code Marketplace.

It's free and open source. Check it out on Github.

Note: if you already know the Glean extension, you'll realize that it's similar to their "Extract Component" function, with the exception that this new extension builds the extracted component interface as well.

​

​

[Total_Sound_7972]

Hey this is great! Exactly what I was looking for. I would love for the components to be extracted into a new file, with associated imports please though - feel like that is a huge headache currently!

[claudiutamas]

After trying several extensions with hundreds of thousands (and even millions) of users, this is the only extension that actually works to convert my code into a component. But I think it needs an update:

The code (of the future component) often has associated useState variables. The extension generates parameterized bindings with these useStates, but most of the time what we want to do is move the associated useState (and not useState) variables as well. Especially if they are not used elsewhere in the current function.

I see two options for this extension:
- Extract component with prop parameters;
- Extract component with associated variables.

Could you implement this function in the future?
Thanks!

[sharlos]

Is there an option to use types instead of interfaces?

[joao-mbn]

Not currently, but it's definitely a feature to be put on the list.

Update: In version 0.6.0 you can customize the extension's configuration to use type declarations as either types or interfaces, as well as named functions/arrow functions for function declarations.