React CodeSandbox

Install

npm install @uiw/react-codesandbox --save

Usage

import React from 'react';
import CodeSandbox from '@uiw/react-codesandbox';

const code = `import React from 'react';
import ReactDOM from 'react-dom';

const App = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  <App />,
  document.getElementById('root')
);`;

function Demo() {
  return (
    <CodeSandbox
      files={{
        "package.json": {
          content: {
            dependencies: {
              react: "latest",
              "react-dom": "latest"
            }
          }
        },
        "index.js": {
          content: code
        },
        "index.html": {
          content: `<div id="root"></div>`
        }
      }}
    >
      Open in CodeSandbox
    </CodeSandbox>
  )
}

Props

type CodeSandboxProps = React.FormHTMLAttributes<HTMLFormElement> & {
  /**
   * Whether we should redirect to the embed instead of the editor.
   */
  embed?: boolean;
  /**
   * The query that will be used in the redirect url. `embed` must be equal to `true`, `embed=true`.
   * [CodeSandbox Embed Options](https://codesandbox.io/docs/embedding#embed-options)
   * @example `view=preview&runonclick=1`
   */
  query?: string;
  /**
   * Instead of redirecting we will send a JSON reponse with `{"sandbox_id": sandboxId}`.
   */
  json?: boolean;
  /**
   * Parameters used to define how the sandbox should be created.
   */
  files?: Record<string, {
    content?: string | Record<string, any>;
    isBinary?: boolean;
  }>
};

Development

# Step 1, run first, listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start

npm run build

Related

Contributors

License