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.ts
import { defineConfig } from "vite";
export default defineConfig({
  optimizeDeps: {
    exclude: ["react-repl-plus"],
  },
  // ...
});

Advance Usage

npm install react-repl-plus

Props

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 params

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
)

Basic Usage

import { Repl } from "react-repl-plus";
import "react-repl-plus/style.css";

export default function App() {
  return <Repl></Repl>;
}

Demo2

import { Repl, useStore } from "react-repl-plus";
import "react-repl-plus/style.css";
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;

Credit

inspired by @vue/repl