This package contains the type definitions and initialize helper method to use with the dynamically imported Connections SDK.
You can install this library using npm:
$ npm i -S @codat/sdk-connections
To render the CodatConnections
component in React:
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import {
CodatConnectionsProps,
initCodatConnections,
} from "@codat/sdk-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>
);
};
// The code below is an example of how to render the component at the root level of the application
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<CodatConnections
accessToken="ACCESS_TOKEN" // This must first be fetched for a given company using the /companies/{companyId}/connectionManagement/accessToken endpoint (See our OAS spec: https://docs.codat.io/codat-api#/operations/get-connection-management-access-token)
onClose={() => alert("onClose")}
onError={() => alert("onError")}
onDisconnect={() => alert("onDisconnect")}
onReconnect={() => alert("onReconnect")}
options={{}}
/>
</React.StrictMode>
);