@codatum/embed-反应

Codatum 签名 Embed 的响应集成 。 提供将SDK核心包裹在一起的单一组件. 全体人员 @ codatum/ 嵌入 被再导出,这样您就可以将这个软件包作为单一的切入点(一个版本,不拆分).

选项、类型、事件和方案 API 详情见 @ codatum/ 嵌入。 。 。 .

安装

pnpm add @codatum/embed-react
# or
npm install @codatum/embed-react

要求数 反应 18+ (同类依赖).

使用量

import { EmbedReact } from "@codatum/embed-react";

const embedUrl = "https://app.codatum.com/protected/workspace/xxx/notebook/yyy";
const tokenProvider = async () => {
  const res = await fetch("/api/embed-token", { method: "POST" });
  const data = await res.json();
  return { token: data.token };
};

function App() {
  return (
    <EmbedReact
      embedUrl={embedUrl}
      tokenProvider={tokenProvider}
      iframeOptions={{ theme: "LIGHT", locale: "ja" }}
      onStatusChanged={(e) => console.log("Status", e.status)}
      onParamChanged={(e) => console.log("Params", e.params)}
      onExecuteSqlsTriggered={(e) => console.log("Execute", e.params)}
      onError={(e) => console.error(e)}
    />
  );
}

通话 reload 从父母那里

使用校对并呼叫曝光者 reload() 方法。 它回来了 true 成功和 false (错误报告通过 onError它不会抛出.

import { useRef } from "react";
import { EmbedReact, type EmbedReactRef } from "@codatum/embed-react";

function App() {
  const embedRef = useRef<EmbedReactRef>(null);

  async function onFilterChange() {
    const ok = await embedRef.current?.reload();
    if (!ok) console.warn("reload failed — see onError");
  }

  return (
    <>
      <button type="button" onClick={onFilterChange}>
        Reload
      </button>
      <EmbedReact
        ref={embedRef}
        embedUrl="..."
        tokenProvider={...}
        onError={handleError}
      />
    </>
  );
}

自定义装入 UI

使用 renderLoading 在装入时显示自定义的用户界面. showLoadingOn 显示状态的控件( 默认 ): INITIALIZING 编号 : RELOADING 编号 : REFRESHING) (中文(简体) ).

<EmbedReact
  embedUrl={embedUrl}
  tokenProvider={tokenProvider}
  renderLoading={() => <MySpinner />}
/>

只在第一个负载上显示 :

<EmbedReact
  embedUrl={embedUrl}
  tokenProvider={tokenProvider}
  showLoadingOn={["INITIALIZING"]}
  renderLoading={() => <FullPageLoader />}
/>

按状况划分:

<EmbedReact
  embedUrl={embedUrl}
  tokenProvider={tokenProvider}
  renderLoading={({ status }) =>
    status === "INITIALIZING" ? <FullPageLoader /> : <SubtleBar />
  }
/>

运行时更改道具

道具一上山就读取. 应用新值(例如: embedUrl 或者说 iframeOptions),使用时 key 强制重载 :

<EmbedReact key={embedUrl} embedUrl={embedUrl} tokenProvider={tokenProvider} />

API 密码

选项类型和行为(例如:. iframeOptions, (中文(简体) ), tokenOptions, (中文(简体) ), displayOptions, (中文(简体) ), devOptions) 与在 @ codatum/ 嵌入该组件使用根元件作为iframe容器(无) container (原始内容存档于2013-10-12). prop.

道具

回电

参考文献( E)EmbedReactRef(中文(简体) )

需要自定义容器还是完全控制? 使用 createEmbed() 从此套件( 或 @ codatum/ 嵌入(a) 内 useEffect 打电话 instance.destroy() 在清理中.

另见

• 版本和更改日志数字 : 版本
• 安保和部署数字 : 安保和部署
• 支持的环境数字 : 支持的环境