VS Code

React Extract

Extract a JSX selection into a React function component. Offline, no AI.

Lite is free. Pro is $12 personal or $39 team, on Gumroad.

Before

          function Page() {
  return (
    <button onClick={save}>
      Save {name}
    </button>
  );
}

After

          function SaveButton({ name, save }) {
  return (
    <button onClick={save}>
      Save {name}
    </button>
  );
}

<SaveButton name={name} save={save} />

React Extract takes a JSX or TSX selection and turns it into a function component, in the same file or a new one. Props are inferred from the variables the JSX uses, and the call site is replaced. The parser is bundled. There is no AI, no telemetry, and no network call.

What you get

Lite handles fragments, event handlers, key, a hook warning, and imports copied into a new file.
Pro is $12 for a personal license and $39 for a team license, on Gumroad.
Pro adds a TSX props type, extract to a custom hook, split file into components, naming and export presets, and a CSS-module stub.