@dev-fastn-ai/react v1.3.1

@fastn-ai/react

A React library to integrate the fastn connector marketplace in your application.

Installation

Install the package via npm:

npm install @fastn-ai/react

Usage

Setup Application Context

To begin, wrap your application in the FastnProvider and provide the required configuration:

import { useState } from "react";
import { FastnProvider } from "@fastn-ai/react";

function App() {
  const [config] = useState({
    projectId: "your-workspace-id",
    tenantId: "your-tenant-id",
    authToken: "your-auth-token",
    env: "your-environment", // e.g., "LIVE", "DRAFT"
    configurationId: "your-configuration-id",
  });

  return (
    <FastnProvider config={config}>
      {/* Your components go here */}
    </FastnProvider>
  );
}

Application Configuration Properties

Embedding Connector Widgets

Use the useConnectors hook to fetch and display connector information in your application.

import { useConnectors } from "@fastn-ai/react";

const ConnectorsList = () => {
  const { connectors, loading, error } = useConnectors();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {connectors?.length ? (
        connectors.map((connector) => (
          <div key={connector.id}>{/** Your Connector Card Component */}</div>
        ))
      ) : (
        <p>No connectors found</p>
      )}
    </div>
  );
};

Hook Return Properties

Connector Object Structure

Action Object Structure

Form Object

Field Object Structure

Embedding Connector Configuration

Use the useConfigurations hook to fetch and display connector configurations in your application.

import { useConfigurations } from "@fastn-ai/react";

const ConfigurationsList = () => {
  const { configurations, loading, error } = useConfigurations();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {configurations?.length ? (
        configurations.map((configuration) => (
          <div key={configuration.id}>
            {/** Your Configuration Card Component */}
          </div>
        ))
      ) : (
        <p>No configurations found</p>
      )}
    </div>
  );
};

Hook Return Properties

Configuration Object Structure

Action Object Structure

Sample Configurations

[
  {
    "id": "66da971c-5c57-4de8-9b85-371d24c5fb45",
    "connectorId": "66da971c-5c57-4de8-9b85-371d24c5fb45",
    "configurationId": "12345678910",
    "name": "Microsoft Teams",
    "flowId": "configureTeams",
    "description": "Send notifications to Microsoft Teams",
    "imageUri": "assets/PNG/Microsoft_Office_Teams_Logo_512px.png",
    "status": "ENABLED",
    "actions": [
      {
        "name": "Disable",
        "actionType": "DISABLE"
      }
    ],
    "metadata": {
      "id": "12345678910",
      "connectorId": "66da971c-5c57-4de8-9b85-371d24c5fb45",
      "chats": [
        {
          "value": "19:meeting_MGVmNTdjMDgtYjNlYS00MjRiLTk5YTQtMzNkZjkwZWU4ZTY3@thread.v2",
          "label": "Microsoft Graph User flow"
        },
        {
          "value": "19:meeting_MWMwMTBlN2QtM2ZlMy00NGNhLWJhZDYtYTE1MTM1N2RmZmE4@thread.v2",
          "label": "Microsoft Teams Integration Sync & Solution Architecture Review"
        }
      ]
    }
  }
]

Embedding Configuration Form

Use the ConfigurationForm component to display a form for configuring a connector. The wrapper component should be displayed only after the onClick handler for the enable action has been successfully completed, so the user can activate the specific connector. For updates, the component should simply be displayed when the Update button is clicked. The update functionality is not part of the actions array.

import { ConfigurationForm } from "@fastn-ai/react";

const ConfigurationFormWrapper = ({
  configuration,
}: {
  configuration: any,
}) => {
  return (
    <ConfigurationForm
      configuration={configuration}
      onComplete={onClose}
      onCancel={onClose}
      primaryButtonAs={(props) => (
        <button {...props}>{props?.isLoading ? "Loading..." : "Save"}</button>
      )}
      secondaryButtonAs={(props) => <button {...props}>Cancel</button>}
      placeButtonFirst="secondary"
      placeButtons="left"
      style={{ ...customStyles } as CustomStyle}
    />
  );
};

Custom Styling Object structure

The ConfigurationForm component accepts a style prop to apply custom styles to the form.

FormStyle Object structure

FormFieldStyle Object structure

StylesConfig Object structure

check the react-select documentation for more information on the styles object here

ThemeConfig Object structure

check the react-select documentation for more information on the theme object here

ClassNamesConfig Object structure

check the react-select documentation for more information on the class names object here

Need Help?

If you have any questions or need help, please contact us at support@fastn.ai.