@hep-code-runner/react

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

安装

npm install @hep-code-runner/react

引入

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

CodeRunner

用法

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 | '运行' | 运行按钮文字 |

受控模式

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

用法

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>
          </>
        }
      />
    </>
  );
}

受控模式

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