# React Repl[![npm version](https://img.shields.io/npm/v/react-repl-plus.svg)](https://www.npmjs.com/package/react-repl-plus)[![npm downloads](https://img.shields.io/npm/dm/react-repl-plus.svg)](https://www.npmjs.com/package/react-repl-plus)[![npm license](https://img.shields.io/npm/l/react-repl-plus.svg)](https://www.npmjs.com/package/react-repl-plus)

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.**

```ts
// vite.config.ts
import { defineConfig } from "vite";
export default defineConfig({
  optimizeDeps: {
    exclude: ["react-repl-plus"],
  },
  // ...
});
```

# Advance Usage

```shell
npm install react-repl-plus
```

## Props

```ts
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

```ts
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

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

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

## Demo2

```ts
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