react playground
1.0.0
Il s'agit d'un éditeur de code en ligne React qui peut exécuter le code React en temps réel, prend en charge l'introduction dynamique de fichiers personnalisés et de packages de dépendance tiers, prend en charge TS, TSX et peut être intégré à des projets.
Exemples de base
Exemple ahooks
Exemple de cartes fourmi-conception
Exemple ANT
Il peut y avoir des modifications d'API et de nouvelles fonctionnalités avant la version 1.0. Je vais le réparer et le stabiliser dès que possible. Si vous êtes intéressé, vous pouvez faire 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 />
}
Playgroundest un composant de page, qui est invasif pour l'environnement hôte lorsqu'il est utilisé (certains JS et CSS seront chargés dynamiquement et le hachage de l'URL sera modifié par défaut. Vous pouvez annuler la modification de l'URL en configurantsaveOnUrl={false}).
PlaygroundSandbox est un composant qui a Playground de sandbox, avec des fonctions et des éléments de configuration complètement cohérents, et est complètement isolé de l'environnement hôte.
Si vous n'êtes utilisé que dans des documents ou des projets, il est recommandé d'utiliser le composant PlaygroundSandbox .
Commande de devis: import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
PlaygroundSandbox téléchargera des packages à partir de CDN, avec un volume de seulement 10 Ko + et 2KB + après GZIP
Un package complet sera ajouté à l'avenir, qui peut être utilisé sans environnements réseau externes, et le volume sera beaucoup plus important.
Exemple de 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 ,
} }
/>
</ >
)
}| Nom | Taper | Défaut | Description |
|---|---|---|---|
| largeur | String 丨 Numéro 丨 Undefined | 100VW | largeur |
| hauteur | String 丨 Numéro 丨 Undefined | 100VH | haut |
| thème | 'sombre' '丨' Light '丨 Undefined | 'lumière' | thème |
| showheader | booléen 丨 indéfini | vrai | S'il faut afficher la tête |
| frontière | booléen 丨 indéfini | FAUX | S'il faut afficher les bordures |
| showfileselector | booléen 丨 indéfini | vrai | S'il faut afficher l'onglet Fichier |
| FileSelectorAlly | booléen 丨 indéfini | FAUX | L'onglet Fichier est-il unique? |
| showcompileoutput | booléen 丨 indéfini | vrai | S'il faut afficher le code compilé |
| TIFAUTS | nombre [] 丨 Undefined | [100,100] | Échec de la largeur de la zone éditeur et aperçu |
| options | {LinenUmbers ?: Boolean; FonTSize ?: Numéro; TabSize ?: Numéro} 丨 Undefined | indéfini | Configuration de l'éditeur |
| fichiers | Déposer | Objet | Code d'initialisation |
| importmap | {importations: enregistrer <string, string>} | DefaultImportMap | Initialiser l'importmap |
| sauvegarder | booléen | vrai | Le code est-il stocké sur l'URL |
| onfileschange | (hachage: chaîne) => void | indéfini | Le rappel après modification du code, le paramètre de rappel est la valeur de hachage du fichier |
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] "
}
}J'ai écrit un article sur les principes de mise en œuvre et les processus de cette composante. Si vous êtes intéressé, vous pouvez jeter un œil à React a enfin un terrain de jeu: un éditeur en ligne qui peut exécuter React Code en temps réel
