react playground
1.0.0
Este es un editor de código en línea React que puede ejecutar el código React en tiempo real, admite la introducción dinámica de archivos personalizados y paquetes de dependencia de terceros, admite TS, TSX y puede integrarse en proyectos.
Ejemplos básicos
Ejemplo de Ahooks
Ejemplo
Ejemplo de antd
Puede haber algunos cambios de API y nuevas características antes de la versión 1.0. Lo arreglaré y lo estabilizaré lo antes posible. Si está interesado, puede prestar atención.
npm install react-exercise-playground --save
# or
pnpm install react-exercise-playground --save import { Playground } from 'react-exercise-playground'
export const Demo1 = ( ) => {
return < Playground />
}
Playgroundes un componente de página, que es invasivo para el entorno de host cuando se usa (algunos JS y CSS se cargarán dinámicamente y el hash de URL se cambiará de forma predeterminada. Puede cancelar el cambio a la URL configurandosaveOnUrl={false}).
PlaygroundSandbox es un componente que tiene Playground infantil, con funciones y elementos de configuración completamente consistentes, y está completamente aislado del entorno de host.
Si solo se usa en documentos o proyectos, se recomienda usar el componente PlaygroundSandbox .
Comando de cita: import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
PlaygroundSandbox descargará paquetes de CDN, con un volumen de solo 10kb+ y 2kb+ después de GZIP
Se agregará un paquete completo en el futuro, que se puede usar sin entornos de red externos, y el volumen será mucho mayor.
Código de muestra:
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 ,
} }
/>
</ >
)
}| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| ancho | cadena 丨 número 丨 indefinido | 100VW | ancho |
| altura | cadena 丨 número 丨 indefinido | 100 VH | alto |
| tema | 'Dark' 丨 'Light' 丨 Undefinado | 'luz' | tema |
| showheader | booleano 丨 indefinido | verdadero | Si mostrar la cabeza |
| borde | booleano 丨 indefinido | FALSO | Si mostrar bordes |
| showfileLeLector | booleano 丨 indefinido | verdadero | Si mostrar la pestaña Archivo |
| fileselectorReadonly | booleano 丨 indefinido | FALSO | ¿Se lee solo la pestaña del archivo? |
| showCompileOutput | booleano 丨 indefinido | verdadero | Si mostrar el código compilado |
| control predeterminado | número [] 丨 indefinido | [100,100] | Escala de ancho del área y vista previa del área |
| opción | {Linenumbers?: boolean; fontSize?: número; tabsize?: número} 丨 indefinido | indefinido | Configuración del editor |
| archivos | Archivo | Objeto | Código de inicialización |
| ImportMap | {importaciones: registro <string, string>} | DefaultIMportMap | Inicializar importmap |
| saveonurl | booleano | verdadero | ¿El código se almacena en la URL? |
| cambio de filas | (hash: string) => void | indefinido | La devolución de llamada Después de cambiar el código, el parámetro de devolución de llamada es el valor de hash de archivo |
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] "
}
}Escribí un artículo sobre los principios y procesos de implementación de este componente. Si está interesado, puede echar un vistazo a React Finalmente tiene un patio de recreo: un editor en línea que puede ejecutar el código React en tiempo real
