React Repl

React component for editing React components, it is similar to vue repl。

You can experience React Playground online on react-repl-vercel.app(https://react-repl.vercel.app/)

Note

now just support .(t|j)sx and .(t|j)s extensions.

requires explicitly passing in the editor to be used for tree-shaking.

// vite.config.tsimport{defineConfig}from"vite";exportdefaultdefineConfig({optimizeDeps: {exclude: ["react-repl-plus"],},// ...});

Advance Usage

npm install react-repl-plus

Props

exportinterfaceReplProps{/** * 全局数据 */store?: ReplStore;/** * 是否自动保存 * @default true */autoSave?: boolean;/** * 主题色 * @default "light" */theme?: Theme;/** * 布局 * @default 'horizontal' */layout?: "horizontal"|"vertical";}

props.store is generated by useStore

useStore params

useStore({// file templatetemplate: {welcomeCode: string;// main file templatetemplateCode: string;// other file template};
mainFile: string;// main file filename
activeFilename: string;// current active file filename
builtinImportMap: ImportMap;// pre-set import map},// initialize repl with previously serialized state
serializedState?: string)

Basic Usage

import{Repl}from"react-repl-plus";import"react-repl-plus/style.css";exportdefaultfunctionApp(){return<Repl></Repl>;}

Demo2

import{Repl,useStore}from"react-repl-plus";import"react-repl-plus/style.css";constPlayground=()=>{const[theme,setTheme]=useState<Theme>("light");consthash=location.hash.slice(1);conststore=useStore({},hash);constnewHash=store.serialize();useEffect(()=>{history.replaceState({},"",newHash);},[newHash]);useEffect(()=>{document.documentElement.className=theme;return()=>{document.documentElement.className="";};},[theme]);return(<divclassName="playground-container"><Headertheme={theme}onChangeTheme={(value)=>setTheme(value)}></Header><Replstore={store}theme={theme}layout={layout.current}></Repl></div>);};exportdefaultPlayground;

Credit

inspired by @vue/repl