Select some JSX, press Ctrl+. (Cmd+.) and choose Extract to component. React Extract creates a function component, works out its props from the variables the JSX uses, and replaces your selection with <NewComponent … />. It can put the component in the same file or in a new file, with the import added for you. React Extract Lite is free. React Extract Pro is a paid add-on (see the table below).
100% offline. It uses a bundled Babel parser and runs as a plain AST transform on your machine. No AI, no network, no telemetry, no sign-in. It works on current VS Code (1.85+) and in untrusted and air-gapped workspaces.
What it does
- Extract to component (same file): the component goes right above the top-level declaration that contains your selection.
- Extract to component (new file): creates
Name.jsx / Name.tsx next to the current file with export default, copies the imports the JSX needs (relative paths rebased), and adds import Name from './Name'.
- Props inferred: every outer variable the selection uses (state, props, locals, callback params from
.map) becomes a prop and is passed at the call site. Module-level imports stay imports.
- Event handlers:
onClick={() => setCount(count + 1)} → setCount and count become props. Named handlers (onSubmit={handleSubmit}) are passed too.
- Fragments: select several sibling elements and they are wrapped in
<>…</>. An existing fragment is kept as it is.
key stays put: extracting <li key={item.id}> from a .map leaves key on the call site.- Hook warning: if the selection calls
useSomething(), you are asked to confirm, because the hook will run in the new component.
- Safe: the result is re-parsed before anything is written. If it would not parse, nothing changes.
- Works in
.jsx, .tsx, and JSX inside .js / .ts.
Lite vs Pro
| Feature |
Lite (free, this extension) |
Pro (add-on) |
| Extract JSX to component, same file or new file |
✓ |
✓ |
| Props inferred from outer variables, call site wired up |
✓ |
✓ |
Fragments, event handlers, key handling, hook warning |
✓ |
✓ |
| Imports copied and rebased into the new file |
✓ |
✓ |
TSX props interface / type with inferred types |
– |
✓ |
Extract statements to a custom hook (useX) |
– |
✓ |
| Split a file into one component per file |
– |
✓ |
| Presets: function/arrow, default/named export, PascalCase/kebab-case files, target folder |
– |
✓ |
CSS-module stub (X.module.css / .scss) for new files |
– |
✓ |
Get Pro: React Extract Pro on Gumroad — $12 Personal / $39 Team
Commands (Command Palette → "React Extract", or the Ctrl+. light bulb)
- React Extract: Extract to component (same file) —
reactExtract.extractToComponent
- React Extract: Extract to component (new file) —
reactExtract.extractToNewFile
Settings
reactExtract.defaultComponentName (default ExtractedComponent)reactExtract.promptForName (default true)reactExtract.openNewFile (default false)
Limits
- Class components:
this.props.x is not turned into props (you get a warning).
- New-file mode: top-level non-imported values from the original file (constants, helpers) are passed as props rather than imported.
- Imports left unused in the original file are not removed. Run your linter's organize-imports.
- Props are passed as
name={name}. Spread props ({...rest}) are passed through as rest.
- Lite components are untyped (
({ a, b })). Typed props interfaces are in Pro.
Privacy
React Extract makes no network requests and collects no data. A build test fails if the bundle contains http, https, net, tls, child_process, fetch(, XMLHttpRequest or WebSocket.
Bugs and feedback: bhamlefty@gmail.com · https://zecro-react-extract.pages.dev/
| |
