React CodeSandbox
===


A React component is provided that allows you to programmatically generate codesandbox projects from code samples on the fly.

Install

``bash
npm install @uiw/react-codesandbox --save
`

Usage

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

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

const App = (

Hello, {formatName(user)}!

);

ReactDOM.render(
,
document.getElementById('root')
);;

function Demo() {
return (
files={{
"package.json": {
content: {
dependencies: {
react: "latest",
"react-dom": "latest"
}
}
},
"index.js": {
content: code
},
"index.html": {
content:


}
}}
>
Open in CodeSandbox

)
}
`

Props

`typescript
type CodeSandboxProps = React.FormHTMLAttributes & {
/**
* 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
* @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 content?: string | Record;
isBinary?: boolean;
}>
};
`

Development

Runs the project in development mode.

`bash


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
`

production

Builds the app for production to the build folder.

`bash
npm run build
`

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

$3

- @uiw/react-codepen
- @uiw/react-stackblitz`

$3

Licensed under the MIT License.