React Extract JSX

Wrap arbitrary React components and it will generate JSX.

Basic Example

import React, { useState } from "react";
import ExtractJSX from "react-extract-jsx";

export function App() {
  const [code, setCode] = useState<string>();

  return (
    <>
      <ExtractJSX setCode={setCode}>
        <p>Extract JSX can show the JSX of a component</p>
      </ExtractJSX>

      <h2>JSX of above component</h2>
      <pre>{code}</pre>
    </>
  );
}

Complex Example

import React, { useState } from "react";
import ExtractJSX from "react-extract-jsx";

export function App() {
  const [code, setCode] = useState<string>();
  const [isChecked, setIsChecked] = useState<boolean>();

  return (
    <>
      <ExtractJSX setCode={setCode}>
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <Div data-blah={<Div> sdfsdf</Div>}>Learn React</Div>
        <label>
          <input
            type="checkbox"
            checked={isChecked}
            onClick={() => setIsChecked(!isChecked)}
          />
          click to toggle and see live updates to JSX
        </label>
      </ExtractJSX>

      <h2>JSX of above component</h2>
      <pre>{code}</pre>
    </>
  );
}

function Div(props: any) {
  return <div {...props} />;
}

export default App;