react playground
1.0.0
Dies ist ein React-Online-Code-Editor, der React-Code in Echtzeit ausführen kann, die dynamische Einführung benutzerdefinierter Dateien und Abhängigkeitspakete von Drittanbietern unterstützt, TS, TSX unterstützt und in Projekte eingebettet werden kann.
Grundlegende Beispiele
Ahooks Beispiel
Ameisen-Design-Charts-Beispiel
AntD -Beispiel
Es kann vor Version 1.0 einige API -Änderungen und neue Funktionen geben. Ich werde es so schnell wie möglich reparieren und stabilisieren. Wenn Sie interessiert sind, können Sie aufpassen.
npm install react-exercise-playground --save
# or
pnpm install react-exercise-playground --save import { Playground } from 'react-exercise-playground'
export const Demo1 = ( ) => {
return < Playground />
}
Playgroundist eine Seitenkomponente, die bei der Verwendung in die Hostumgebung invasiv ist (einige JS und CSS werden dynamisch geladen und der URL -Hash wird standardmäßig geändert. Sie können die Änderung in die URL durch KonfigurierensaveOnUrl={false}-Meigenschaft abbrechen).
PlaygroundSandbox ist eine Komponente, die Playground mit Sandboxen mit vollständig konsistenten Funktionen und Konfigurationselementen hat und aus der Hostumgebung vollständig isoliert ist.
Wenn Sie nur in Dokumenten oder Projekten verwendet werden, wird empfohlen, die PlaygroundSandbox -Komponente zu verwenden.
Zitatbefehl: import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
PlaygroundSandbox lädt Pakete von CDN mit einer Lautstärke von nur 10 KB+ und 2 KB+ nach GZIP herunter
In Zukunft wird ein komplettes Paket hinzugefügt, das ohne externe Netzwerkumgebungen verwendet werden kann, und das Volumen wird viel größer sein.
Beispielcode:
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 | Typ | Standard | Beschreibung |
|---|---|---|---|
| Breite | Zeichenfolge 丨 Nummer 丨 undefiniert | 100VW | Breite |
| Höhe | Zeichenfolge 丨 Nummer 丨 undefiniert | 100VH | hoch |
| Thema | 'dunkel' 丨 'hell' 丨 undefiniert | 'Licht' | Thema |
| ShowHeader | boolean 丨 undefiniert | WAHR | Ob der Kopf anzeigen soll |
| Grenze | boolean 丨 undefiniert | FALSCH | Ob Grenzen angezeigt werden sollen |
| ShowfileSelector | boolean 丨 undefiniert | WAHR | Unabhängig davon, ob die Registerkarte "Datei" angezeigt wird |
| fileSelectorReadonly | boolean 丨 undefiniert | FALSCH | Ist die Registerkarte "Datei nur lesen"? |
| showCompileoutput | boolean 丨 undefiniert | WAHR | Ob Sie den kompilierten Code anzeigen sollen |
| Standards | Nummer [] 丨 undefiniert | [100.100] | Editor- und Vorschauderbereichsbreite Skala |
| Optionen | {Leinenumnumbers ?: boolean; fontsize ?: number; tabSize ?: number} 丨 undefiniert | undefiniert | Editorkonfiguration |
| Dateien | Datei | Objekt | Initialisierungscode |
| Importmap | {Imports: Aufzeichnung <String, String>} | DefaultImportmap | Importmap initialisieren |
| Saveonurl | boolean | WAHR | Ist der Code, der auf der URL gespeichert ist |
| OnfileSchange | (Hash: String) => void | undefiniert | Der Rückruf nach der Änderung des Code |
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] "
}
}Ich habe einen Artikel über die Implementierungsprinzipien und -prozesse dieser Komponente geschrieben. Wenn Sie interessiert sind, können Sie einen Blick auf React haben. Endlich hat ein Spielplatz: einen Online -Editor, der React -Code in Echtzeit ausführen kann
