react playground
1.0.0
Это редактор онлайн-кода React, который может запускать код React в режиме реального времени, поддерживает динамическое внедрение пользовательских файлов и сторонних пакетов зависимостей, поддерживает TS, TSX и может быть встроен в проекты.
Основные примеры
пример ахуков
Пример диаграмм муравей
ANTD Пример
До версии 1.0 могут быть некоторые изменения API и новые функции. Я исправим и стабилизирую его как можно скорее. Если вам интересно, вы можете обратить внимание.
npm install react-exercise-playground --save
# or
pnpm install react-exercise-playground --save import { Playground } from 'react-exercise-playground'
export const Demo1 = ( ) => {
return < Playground />
}
Playground- это компонент страницы, который является инвазивным для среды хоста при использовании (некоторые JS и CSS будут загружены динамически, а хэш URL будет изменен по умолчанию. Вы можете отменить изменение на URL, настраивая свойствоsaveOnUrl={false}).
PlaygroundSandbox - это компонент, который имеет Playground с песочкой, с совершенно последовательными функциями и элементами конфигурации, и полностью изолирован от среды хоста.
Если вы используются только в документах или проектах, рекомендуется использовать компонент PlaygroundSandbox .
Команда цитаты: import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
PlaygroundSandbox будет загружать пакеты с CDN с объемом всего 10 КБ+ и 2 КБ+ после GZIP
В будущем будет добавлен полный пакет, который можно использовать без внешних сетевых сред, а объем будет намного больше.
Пример кода:
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 ,
} }
/>
</ >
)
}| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| ширина | Строка 丨 Номер 丨 не определен | 100vw | ширина |
| высота | Строка 丨 Номер 丨 не определен | 100vh | высокий |
| тема | «Темный» 丨 'Light' 丨 не определен | 'свет' | тема |
| Showheader | Логический 丨 неопределен | истинный | Отображать ли голову |
| граница | Логический 丨 неопределен | ЛОЖЬ | Отображать границы |
| Showfileselector | Логический 丨 неопределен | истинный | Отображать вкладку «Файл» |
| FileSelectorreadonly | Логический 丨 неопределен | ЛОЖЬ | Только вкладка файла считывается? |
| ShowCompileOutput | Логический 丨 неопределен | истинный | Отображать скомпилированный код |
| дефолты | число [] 丨 неопределенное | [100,100] | Шкала ширины региона редактора и предварительного просмотра |
| параметры | {Linenumbers?: Boolean; Fontsize?: number; вкладка?: номер} 丨 Неопределенный | неопределенный | Конфигурация редактора |
| файлы | Файл | Объект | Код инициализации |
| импорт | {imports: record <string, string>} | DefaultImportMap | Инициализировать импорт |
| Saveonurl | логический | истинный | Код хранится на URL |
| Onfileschange | (хэш: строка) => void | неопределенный | Обратный вызов после изменения кода, параметр обратного вызова является значением хэша файла |
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] "
}
}Я написал статью о принципах и процессах реализации этого компонента. Если вы заинтересованы, вы можете взглянуть на React, наконец, есть игровая площадка: онлайн -редактор, который может запускать код React в режиме реального времени
