@codat/sdk-link-types

此套件包含类型定义并初始化了用于动态导入的 Codat SDKs 的辅助方法: 嵌入式链接、 连接和 Bank Feed .

安装

您可以使用 npm 安装此库 :

$ npm i -S @codat/sdk-link-types

使用量

嵌入式链接

制作 CodatLink 反应中的组件 :

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import { CodatLinkProps, initializeCodatLink } from "@codat/sdk-link-types";

const CodatLink: React.FC<CodatLinkProps> = (props: CodatLinkProps) => {
  const [componentMount, setComponentMount] = useState<HTMLDivElement | null>(
    null
  );

  useEffect(() => {
    const target = componentMount;
    if (target && target.children.length === 0) {
      initializeCodatLink(target, props);
    }
    // CodatLink does not support changing props after initialisation.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [componentMount]);

  return (
    <div
      style={{
        // Recommended dimensions
        width: "460px",
        height: "840px",
        maxHeight: "95%",
      }}
      ref={setComponentMount}
    ></div>
  );
};

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <CodatLink
      companyId="COMPANY_ID"
      onClose={() => alert("onClose")}
      onError={() => alert("onError")}
      onConnection={() => alert("onConnection")}
      onConnectionStarted={() => alert("onConnectionStarted")}
      onFinish={() => alert("onFinish")}
      options={{}}
    />
  </React.StrictMode>
);

连接

制作 CodatConnections 反应中的组件 :

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import {
  CodatConnectionsProps,
  initCodatConnections,
} from "@codat/sdk-link-types/connections";

const CodatConnections: React.FC<CodatConnectionsProps> = (
  props: CodatConnectionsProps
) => {
  const [componentMount, setComponentMount] = useState<HTMLDivElement | null>(
    null
  );

  useEffect(() => {
    const target = componentMount;
    if (target && target.children.length === 0) {
      initCodatConnections(target, props);
    }
    // CodatConnections does not support changing props after initialization.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [componentMount]);

  return (
    <div
      style={{
        // Recommended dimensions
        width: "460px",
        height: "840px",
        maxHeight: "95%",
      }}
      ref={setComponentMount}
    ></div>
  );
};

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <CodatConnections
      accessToken="ACCESS_TOKEN"
      onClose={() => alert("onClose")}
      onError={() => alert("onError")}
      onDisconnect={() => alert("onDisconnect")}
      onReconnect={() => alert("onReconnect")}
      options={{}}
    />
  </React.StrictMode>
);

银行种子

制作 CodatBankFeeds 反应中的组件 :

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import {
  CodatBankFeedsProps,
  initCodatBankFeeds,
} from "@codat/sdk-link-types/bank-feeds";

const CodatBankFeeds: React.FC<CodatBankFeedsProps> = (
  props: CodatBankFeedsProps
) => {
  const [componentMount, setComponentMount] = useState<HTMLDivElement | null>(
    null
  );

  useEffect(() => {
    const target = componentMount;
    if (target && target.children.length === 0) {
      initCodatBankFeeds(target, props);
    }
    // CodatBankFeeds does not support changing props after initialisation.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [componentMount]);

  return (
    <div
      style={{
        // Recommended dimensions
        width: "460px",
        height: "840px",
        maxHeight: "95%",
      }}
      ref={setComponentMount}
    ></div>
  );
};

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <CodatBankFeeds
      accessToken="ACCESS_TOKEN"
      companyId="COMPANY_ID"
      onClose={() => alert("onClose")}
      onError={() => alert("onError")}
      onConnection={() => alert("onConnection")}
      onConnectionStarted={() => alert("onConnectionStarted")}
      onFinish={() => alert("onFinish")}
      options={{}}
    />
  </React.StrictMode>
);

参见我们的例子 与其他语言建立关系.

文档

有关更多信息, 见我们的文件