Embedded Catalog of Providers (React)
It is a React component aimed to be used in any of your pages so end-users can connect their 3rd parties in 1-click!
Installation
npm i @panora/embedded-card-react
or
pnpm i @panora/embedded-card-react
or
yarn add @panora/embedded-card-react
Import the components
import "@panora/embedded-card-react/dist/index.css";
import { PanoraDynamicCatalogCard, PanoraProviderCard } from '@panora/embedded-card-react';
Use the component
- The
optionalApiUrl
is an optional prop to use the component with the self-hosted version of Panora.
<PanoraProviderCard
name={"hubspot"}
projectId={"c9a1b1f8-466d-442d-a95e-11cdd00baf49"}
linkedUserId={"b860d6c1-28f9-485c-86cd-fb09e60f10a2"}
optionalApiUrl={"http://localhost:3000"}
/>
<PanoraDynamicCatalogCard
category={ConnectorCategory.Crm}
projectId={"f9e9601e-d6da-471a-9777-94257e9b4f00"}
linkedUserId={"4c6ca51b-7b23-4e3a-9309-24d2d331a04d"}
optionalApiUrl="http://localhost:3000"
/>
These are the types needed for the components.
The `<PanoraProviderCard />` takes this props type:
interface ProviderCardProp {
name: string;
projectId: string;
linkedUserId: string;
}
The `<PanoraDynamicCatalogCard />` takes this props type:
interface DynamicCardProp {
projectId: string;
linkedUserId: string;
category?: ConnectorCategory;
optionalApiUrl?: string,
}