npm package: @hep-code-runner/react
Description: React code runner component
Latest version: 3.3.12

# @hep-code-runner/react

React 代码运行器组件，基于 Piston API 支持多种编程语言在线执行。

## 安装

```bash
npm install @hep-code-runner/react
```

## 引入

```jsx
import { CodeRunner } from "@hep-code-runner/react";
```

---

## CodeRunner

### 用法

```jsx
import { CodeRunner } from "@hep-code-runner/react";

function App() {
  return <CodeRunner />;
}
```

### Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| pistonUrl | string | '/api/piston' | Piston API 地址 |
| token | string | - | 认证 Token（会作为 Authorization 和 id-token Header） |
| language | string | 'javascript' | 当前语言 |
| code | string | '' | 当前代码 |
| theme | 'light' \| 'dark' | 'light' | 主题 |
| themeColor | string | - | 自定义主题色 |
| showLanguageSelector | boolean | true | 显示语言选择器 |
| showEditor | boolean | true | 显示代码编辑器 |
| editable | boolean | true | 是否可编辑 |
| executorLabel | string | '运行' | 运行按钮文字 |

### 受控模式

```jsx
import { useState } from "react";
import { CodeRunner } from "@hep-code-runner/react";

function App() {
  const [language, setLanguage] = useState("javascript");
  const [code, setCode] = useState('console.log("hello")');

  return (
    <CodeRunner
      language={language}
      code={code}
      onLanguageUpdate={setLanguage}
      onCodeUpdate={setCode}
    />
  );
}
```

### 回调函数

| 属性 | 类型 | 说明 |
|------|------|------|
| onLanguageUpdate | (language: string) => void | 语言变化 |
| onCodeUpdate | (code: string) => void | 代码变化 |
| onExecuteStart | () => void | 代码开始执行 |
| onExecuteEnd | (result) => void | 代码执行完成 |
| onLanguageChange | (language, code) => void | 语言切换 |
| onChange | (code: string) => void | 代码变化（防抖） |

---

## CodeRunnerDialog

### 用法

```jsx
import { useRef } from "react";
import { CodeRunnerDialog } from "@hep-code-runner/react";

function App() {
  const dialogRef = useRef(null);

  return (
    <>
      <button onClick={() => dialogRef.current?.open()}>打开</button>

      <CodeRunnerDialog
        ref={dialogRef}
        title="代码执行器"
        footer={
          <>
            <button onClick={() => dialogRef.current?.close()}>取消</button>
            <button onClick={handleSave}>保存</button>
          </>
        }
      />
    </>
  );
}
```

### 受控模式

```jsx
import { useState } from "react";
import { CodeRunnerDialog } from "@hep-code-runner/react";

function App() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button onClick={() => setVisible(true)}>打开</button>

      <CodeRunnerDialog
        open={visible}
        onClose={() => setVisible(false)}
        title="代码执行器"
        width={800}
        footer={
          <>
            <button onClick={() => setVisible(false)}>取消</button>
            <button onClick={handleSave}>保存</button>
          </>
        }
      />
    </>
  );
}
```

### Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| open | boolean | - | 控制显隐（受控模式） |
| defaultOpen | boolean | false | 初始状态（非受控模式） |
| title | string | '代码执行器' | 弹窗标题 |
| width | string \| number | 800 | 弹窗宽度 |
| onClose | () => void | - | 关闭回调 |
| footer | ReactNode | - | 底部自定义内容 |
| pistonUrl | string | '/api/piston' | Piston API 地址 |
| token | string | - | 认证 Token（会作为 Authorization 和 id-token Header） |
| language | string | 'javascript' | 当前语言 |
| code | string | '' | 当前代码 |
| theme | 'light' \| 'dark' | 'light' | 主题 |
| themeColor | string | - | 自定义主题色 |
| showLanguageSelector | boolean | true | 显示语言选择器 |
| showEditor | boolean | true | 显示代码编辑器 |
| editable | boolean | true | 是否可编辑 |
| executorLabel | string | '运行' | 运行按钮文字 |
| closeOnOverlayClick | boolean | true | 点击弹窗外部是否关闭 |

### Ref Methods

| 方法 | 说明 |
|------|------|
| close() | 关闭弹窗 |

## 依赖

- react: ^16.8.0
- prismjs: ^1.30.0