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/)
npm install react-repl-plus
export interface ReplProps {
/**
* 全局数据
*/
store?: ReplStore;
/**
* 是否自动保存
* @default true
*/
autoSave?: boolean;
/**
* 主题色
* @default "light"
*/
theme?: Theme;
/**
* 布局
* @default 'horizontal'
*/
layout?: "horizontal" | "vertical";
}
props.store
is generated by useStore
useStore({
// file template
template: {
welcomeCode: string; // main file template
templateCode: 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
)
import { Repl, useStore } from "react-repl-plus";
const Playground = () => {
const [theme, setTheme] = useState<Theme>("light");
const hash = location.hash.slice(1);
const store = useStore({}, hash);
const newHash = store.serialize();
useEffect(() => {
history.replaceState({}, "", newHash);
}, [newHash]);
useEffect(() => {
document.documentElement.className = theme;
return () => {
document.documentElement.className = "";
};
}, [theme]);
return (
<div className="playground-container">
<Header theme={theme} onChangeTheme={(value) => setTheme(value)}></Header>
<Repl store={store} theme={theme} layout={layout.current}></Repl>
</div>
);
};
export default Playground;
inspired by @vue/repl