Supports various quick operations for JSX structures, including wrapping with new tags, swapping with sibling nodes, creating forwardRef, removing wrapper tags, batch removing content, creating & expressions, conditional expressions, etc. Aims to improve React development efficiency and simplify com
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
A powerful VSCode extension that helps you efficiently refactor and transform React (JSX/TSX) code!
One-click refactoring, wrapping, swapping, and transforming JSX elements.
Features
Wrap JSX with any tag (default Fragment)
Swap position with next sibling JSX element
Create forwardRef wrapper
Remove JSX element and promote its children
Convert JSX to && expression
Convert JSX to conditional (ternary) expression
Commands and Usage
Command Name
Description
Usage
Wrap with new tag react-transformer.warp_it
Wrap selected JSX element with custom tag (default Fragment).
Place cursor inside JSX element, right-click and select "Wrap with new tag", or use command palette.
Swap with next sibling react-transformer.swap_with_next_sibling
Swap position with next sibling JSX element.
Place cursor inside JSX element, right-click and select "Swap with next sibling", or use command palette.
Create forward react-transformer.create_forward
Convert function component to React.forwardRef.
Place cursor on function component variable, right-click and select "Create forward", or use command palette.
Remove react-transformer.remove
Remove selected JSX element and promote its children.
Place cursor inside JSX element, right-click and select "Remove", or use command palette.
