Install

npm install @uiw/react-codesandbox --save

Usage

importReactfrom'react';importCodeSandboxfrom'@uiw/react-codesandbox';constcode=`import React from 'react';import ReactDOM from 'react-dom';const App = (  <h1>    Hello, {formatName(user)}!  </h1>);ReactDOM.render(  <App />,  document.getElementById('root'));`;functionDemo(){return(<CodeSandboxfiles={{"package.json":{content:{dependencies:{react:"latest","react-dom":"latest"}}},"index.js":{content:code},"index.html":{content:`<div></div>`}}}>      Open in CodeSandbox</CodeSandbox>)}

Props

typeCodeSandboxProps=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 filenpm run watch# Step 2, development mode, listen to compile preview website instancenpm run start

npm run build

Related

Contributors

License