@sarmadnawaz-testing-workspace/fastn NPM

@fastn-ai/react

A React library for seamlessly embedding Fastn in your React applications.

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-project-id",
    tenantId: "your-tenant-id",
    authToken: "your-auth-token",
    env: "your-environment", // e.g., "LIVE", "DRAFT"
    subscriptionId: "your-subscription-id",
  });

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

Application Configuration Properties

Prop Name	Type	Type	Description
projectId	string	Yes	The ID of the project whose widgets/connectors you want to embed.
authToken	string	Yes	The authentication token used to authenticate your application users.
tenantId	string	No	The ID of the tenant (e.g., user, organization, etc.) (optional).
env	string	No	The environment of the widget ("LIVE" or other values) (optional).
subscriptionId	string	No	ID of the subscription for connectors configurations

Embedding Connector Widgets

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

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

import { useConnectors } from "@sarmadnawaz-testing-workspace/fastn";

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>
  );
};

cHook Return Properties

Prop Name	Type	Description
connectors	array	An array of connectors objects.
loading	boolean	A boolean value to indicate if the connectors are being loaded.
error	string	An error message if the connectors failed to load.

Connector Object Structure

Prop Name	Type	Description
id	string	The ID of the connector.
name	string	The name of the connector. (i.e slack)
status	string	The status of the connector "ACTIVE" or "INACTIVE".
imageUri	string	The URI of the connector image.
description	string	The description of the connector.
actions	array	An array of actions objects.

Action Object Structure

Prop Name	Type	Description
name	string	The name of the action.
onClick	function	Function to handle click events, returning a Promise.
actionType	string	The tell about the action type. "ACTIVATION" or "DEACTIVATION".
form	object	Form metadata, required for actions needing user input.
onSubmit	function	Submit handler function, required if the action has a form.

Form Object

Prop Name	Type	Description
fields	array	Array of field objects defining the form inputs.
description	string	Description or instructions for the form.
submitButtonLabel	string	Label for the form's submit button.

Field Object Structure

Prop Name	Type	Description
name	string	Name of the field.
label	string	Label for the field.
initialValue	string	Default value of the field.
required	boolean	Indicates if the field is required.
type	string	Input type, e.g., "text", "number", "email".
hidden	boolean	If true, the field will be hidden.
disabled	boolean	If true, the field will be disabled.

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>
  );
};

cHook Return Properties

Prop Name	Type	Description
configurations	array	An array of configurations objects.
loading	boolean	A boolean value to indicate if the configurations are being loaded.
error	string	An error message if the configurations failed to load.

Configuration Object Structure

Prop Name	Type	Description
name	string	The name of the connector.
status	string	The status of the configuration "ENABLED" or "DISABLED".
description	string	The description of the connector.
imageUri	string	The URI of the connector image.
actions	array	An array of actions objects.

Action Object Structure

Prop Name	Type	Description
name	string	The name of the action.
onClick	function	Function to handle click events, returning a Promise.
actionType	string	The tell about the action type. "ENABLE" or "DISBALE".
form	object	Form metadata, required for actions needing user input.
onSubmit	function	Submit handler function, required if the action has a form.

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>}
    />
  );
};

Need Help?

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

fastn-widget fastn-ai widget

@apollo/client @heroicons/react formik graphql react react-dom tslib uuid

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago