react playground
1.0.0
This is a react online code editor that can run react code in real time, supports dynamic introduction of custom files and third-party dependency packages, supports ts, tsx, and can be embedded in projects.
Basic examples
ahooks example
ant-design-charts example
antd example
There may be some API changes and new features before version 1.0. I will fix and stabilize it as soon as possible. If you are interested, you can pay attention.
npm install react-exercise-playground --save
# or
pnpm install react-exercise-playground --save import { Playground } from 'react-exercise-playground'
export const Demo1 = ( ) => {
return < Playground />
}
Playgroundis a page component, which is invasive to the host environment when used (some js and css will be loaded dynamically and the url hash will be changed by default. You can cancel the change to the url by configuringsaveOnUrl={false}property).
PlaygroundSandbox is a component that has sandboxed Playground , with completely consistent functions and configuration items, and is completely isolated from the host environment.
If you are only used in documents or projects, it is recommended to use the PlaygroundSandbox component.
Quote command: import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
PlaygroundSandbox will download packages from CDN, with a volume of only 10kb+, and 2kb+ after gzip
A complete package will be added in the future, which can be used without external network environments, and the volume will be much larger.
Sample code:
import { PlaygroundSandbox } from 'react-exercise-playground'
// import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
export const Demo2 = ( ) => {
const files = {
'App.tsx' : `import {title} from './const'
function App() {
return <h1>this is {title}</h1>
}
export default App
` ,
'const.ts' : {
code : 'export const title = "demo2"' ,
} ,
}
return (
< >
< h1 >作为组件使用： </ h1 >
< PlaygroundSandbox
showHeader = { false }
showCompileOutput = { false }
fileSelectorReadOnly
width = { 700 }
height = { 400 }
files = { files }
border
theme = 'dark'
options = { {
lineNumbers : false ,
} }
/>
< div style = { { height : '60vh' } } > </ div >
< div >滚动到可视范围内才会加载</ div >
< PlaygroundSandbox
showHeader = { false }
showCompileOutput = { false }
fileSelectorReadOnly
width = { 700 }
height = { 400 }
files = { files }
border
theme = 'dark'
options = { {
lineNumbers : false ,
} }
/>
</ >
)
}| Name | Type | Default | Description |
|---|---|---|---|
| width | string丨number丨undefined | 100vw | width |
| height | string丨number丨undefined | 100vh | high |
| theme | 'dark'丨'light'丨undefined | 'light' | theme |
| showHeader | boolean丨undefined | true | Whether to display the head |
| border | boolean丨undefined | false | Whether to display borders |
| showFileSelector | boolean丨undefined | true | Whether to display the file tab |
| fileSelectorReadOnly | boolean丨undefined | false | Is the file tab read only? |
| showCompileOutput | boolean丨undefined | true | Whether to display the compiled code |
| defaultSizes | number[]丨undefined | [100,100] | Editor and Preview Area Width Scale |
| options | { lineNumbers?: boolean;fontSize?: number;tabSize?: number}丨undefined | undefined | Editor configuration |
| files | File | Object | Initialization code |
| importMap | { imports: Record<string, string> } | defaultImportMap | Initialize importmap |
| saveOnUrl | boolean | true | Is the code stored on the url |
| onFilesChange | (hash:string)=>void | undefined | The callback after the code is changed, the callback parameter is the file hash value |
interface File {
[ key : string ] :
| string
| {
code : string
active ?: boolean
hidden ?: boolean
}
}{
"imports" : {
"react" : " https://esm.sh/[email protected] " ,
"react-dom/client" : " https://esm.sh/[email protected] "
}
}I wrote an article about the implementation principles and processes of this component. If you are interested, you can take a look at React finally has a playground: an online editor that can run React code in real time
