react-exercise-playground
Zhe Shi Yi Ge reactZai Xian Dai Ma Bian Ji Qi ,Ke Shi Shi Yun Xing reactDai Ma ,Zhi Chi Dong Tai Yin Ru Zi Ding Yi Wen Jian He Di San Fang Yi Lai Bao ,Zhi Chi ts,tsx,Ke Qian Ru Xiang Mu Shi Yong
Te Dian
- Ke Yi Zai Xian Bian Ji reactDai Ma ,Ti Gong Shi Shi Jiao Hu Shi Yan Shi
- Zhi Chi Yin Ru Di San Fang Ku (ESMGe Shi )
- Zi Dong Jia Zai Di San Ku tsLei Xing Wen Jian ,Ti Gong You Hao De Bian Ma Ti Shi
- Zi Ding Yi Wen Jian Bing Dong Tai Yin Ru ,Zhi Chi ts/tsx/js/jsx/css/json
- Dai Ma Zi Dong Bao Cun Dao URL Shang , Fen Xiang Wang Zhi Ji Ke Fen Xiang Dai Ma
- Chun Qian Duan Bu Shu , Bu Yi Lai Fu Wu Qi ,Ke Gong Si Nei Bu Shu Shi Yong Nei Bu Bao
NEXT TODO
-
Fa Bu npmBao ,Zhi Chi Xiang Mu Nei Qian Ru Shi Yong -
Ti Gong Chang Jing Shi Li - Feng Fu Shi Yong Wen Dang
-
Zhi Chi ts,tsx -
Zhi Chi Di San Fang Yi Lai tsLei Xing Zi Dong Dao Ru - Fa Bu 1.0Ban Ben
- Bian Yi Qi Gai Wei esbuild-wasm,Ti Sheng Yu Lan Su Du
- Dai Ding :Jiang playgroundHe sandboxBao Fen Chi
1.0Ban Ben Zhi Qian Ke Neng Hui You Yi Xie APIBian Dong He Gong Neng Xin Zeng ,Wo Hui Jin Kuai Xiu Fu Bing Wen Ding ,Ru Guo Xing Qu De Ke Yi Guan Zhu Yi Xia
An Zhuang
# or
pnpm install react-exercise-playground --save
Shi Yong Shi Li
export const Demo1 = () => {
return <Playground/>
}
PlaygroundShi Ye Mian Zu Jian ,Shi Yong Shi Dui Su Zhu Huan Jing You Qin Ru Xing (Hui Dong Tai Jia Zai Yi Xie jsHe cssQie Mo Ren Hui Gai Bian url hash,Ke Yi Tong Guo Pei ZhisaveOnUrl={false}Shu Xing Qu Xiao Dui urlDe Gai Bian ).
PlaygroundSandbox
PlaygroundSandboxShi Dui Playground Zuo Liao Sha He Feng Zhuang ,Gong Neng He Pei Zhi Xiang Wan Quan Yi Zhi ,Qie Wan Quan Ge Chi Su Zhu Huan Jing De Zu Jian .
Jin Jin Shi Zai Wen Dang Huo Zhe Xiang Mu Zhong Shi Yong De Hua ,Tui Jian Shi Yong PlaygroundSandboxZu Jian
Yin Yong Ming Ling :import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
PlaygroundSandboxHui Cong CDNXia Zai Bao ,Ti Ji Jin You 10kb+,gzipHou 2kb+
Hou Xu Hui Zeng Jia Yi Ge Wan Zheng Bao ,Wu Wai Wang Huan Jing Xia Ye Ke Shi Yong ,Ti Ji Hui Da Hen Duo
Shi Li Dai Ma :
this is {title}
} export default App `, 'const.ts': { code: 'export const title = "demo2"', }, } return ( <>Zuo Wei Zu Jian Shi Yong :
// import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
export const Demo2 = () => {
const files = {
'App.tsx': `import {title} from './const'
function App() {
return
this is {title}
}
export default App
`,
'const.ts': {
code: 'export const title = "demo2"',
},
}
return (
<>
<h1>Zuo Wei Zu Jian Shi Yong :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>Gun Dong Dao Ke Shi Fan Wei Nei Cai Hui Jia Zai div>
<PlaygroundSandbox
showHeader={false}
showCompileOutput={false}
fileSelectorReadOnly
width={700}
height={400}
files={files}
border
theme='dark'
options={{
lineNumbers: false,
}}
/>
>
)
}
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | stringGun numberGun undefined | 100vw | Kuan Du |
| height | stringGun numberGun undefined | 100vh | Gao Du |
| theme | 'dark'Gun 'light'Gun undefined | 'light' | Zhu Ti |
| showHeader | booleanGun undefined | true | Shi Fou Xian Shi Tou Bu |
| border | booleanGun undefined | false | Shi Fou Xian Shi Bian Kuang |
| showFileSelector | booleanGun undefined | true | Shi Fou Xian Shi Wen Jian tab |
| fileSelectorReadOnly | booleanGun undefined | false | Wen Jian tabShi Fou Zhi Du |
| showCompileOutput | booleanGun undefined | true | Shi Fou Xian Shi Bian Yi Hou Dai Ma |
| defaultSizes | number[]Gun undefined | [100,100] | Bian Ji Qi He Yu Lan Qu Kuan Du Bi Li |
| options | { lineNumbers?: boolean;fontSize?: number;tabSize?: number}Gun undefined | undefined | Bian Ji Qi Pei Zhi |
| files | File | Object | Chu Shi Hua Dai Ma |
| importMap | { imports: Record |
defaultImportMap | Chu Shi Hua importmap |
| saveOnUrl | boolean | true | Dai Ma Shi Fou Cun Chu Dao urlShang |
| onFilesChange | (hash:string)=>void | undefined | Dai Ma Bian Geng Hou De Hui Diao ,Hui Diao Can Shu Wei Wen Jian hashZhi |
File
[key: string]:
| string
| {
code: string
active?: boolean
hidden?: boolean
}
}
defaultImportMap
"imports": {
"react": "https://esm.sh/react@18.2.0",
"react-dom/client": "https://esm.sh/react-dom@18.2.0"
}
}
Qi Ta
Dui Yu Zhe Ge Zu Jian De Shi Xian Yuan Li He Guo Cheng Wo Xie Liao Yi Pian Wen Zhang ,Gan Xing Qu De Ke Yi Kan Yi Kan ReactZhong Yu Ye You playgroundLiao :Yi Ge Neng Shi Shi Yun Xing ReactDai Ma De Zai Xian Bian Ji Qi
Geng Xin Ri Zhi
0.1.93
- Dan Du Chai Fen PlaygroundSandboxZu Jian ,Zhi Chi An Xu Jia Zai
- Xiu Fu PlaygroundSandboxDe Yi Xie bug
0.1.5
- Geng Xin Ban Ben
0.1.4
- Xiu Fu typesLu Jing Cuo Wu
0.1.2
- Xin Zeng typesWen Jian Jia Zai Ti Shi
- Xin Zeng PlaygroundSandboxZu Jian (Gong Neng Yu Yuan PlaygroundZu Jian Yi Zhi ,Zhi Shi Zai iframeZhong Xuan Ran ,Bu Ying Xiang Su Zhu Huan Jing ,Tui Jian Shi Yong )
- You Hua Da Bao He Dai Ma
- Xiu Fu Zhu Ti Pei Zhi Chu Shi Hua Cuo Wu