Skip to main content

​
Hooks

This section provides an overview of the hooks available in the embed-react/src/hooks directory. These hooks are useful

​
useEmbeddedProjectQuery

Fetches project details and connection templates for a given project ID.

​
Parameters

  • projectId (string): The ID of the project to fetch.

​
Returns

  • isLoading (boolean): Indicates if the data is still loading.
  • error (ApiError | undefined): Error object if the request fails.
  • project (Project | undefined): The fetched project details.
  • connectionTemplates (ConnectionTemplate[]): List of connection templates for the project.

​
Example

import { useEmbeddedProjectQuery } from '../hooks/useEmbeddedProjectQuery';

export function ProjectDetails() {
    const { isLoading, error, project, connectionTemplates } = useEmbeddedProjectQuery({
        projectId: '01JW97BNEXS699BD16XW9PWP6R',
    });

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

    return <div>Project Name: {project?.name}</div>;
}

​
useDisconnectActivation

Handles the disconnection of an integration.

​
Returns

  • onDisconnectIntegration ((integrationId: string) => Promise<void>): Function to disconnect an integration by its ID.

​
Example

import { useDisconnectActivation } from '../hooks/useDisconnectActivation';

const { onDisconnectIntegration } = useDisconnectActivation();

const handleDisconnect = async (projectId: string) => {
    await onDisconnectIntegration(projectId);
    console.log('Integration disconnected');
};

​
usePageSelectedState

Manages the state of the selected page in the integration UI.

​
Returns

  • state ({ projectId: string; method: string } | null): The current selected state.
  • onOpenChange ((open: boolean) => void): Function to toggle the open state.
  • onConnectClick ((projectId: string) => void): Function to handle the connect button click.
  • onManageClick ((projectId: string) => void): Function to handle the manage button click.

​
Example

import { usePageSelectedState } from '../hooks/usePageSelectedState';

const { state, onOpenChange, onConnectClick, onManageClick } = usePageSelectedState();

onConnectClick('01JW97BNEXS699BD16XW9PWP6R');
onManageClick('01JW97BNEXS699BD16XW9PWP6R');
onOpenChange(true);

​
useEmbeddedIntegrationPageQuery

Fetches a list of projects and handles integration page data.

​
Parameters

  • params ({ deployed?: boolean }): Optional parameters to filter projects. If true, then only deployed projects are fetched. Returns all projects if not specified or false.

​
Returns

  • isLoading (boolean): Indicates if the data is still loading.
  • error (ApiError | undefined): Error object if the request fails.
  • projects (UserProjectSummary[]): List of user project summaries. This includes the project along with an isActivated booelean indicating if the user is activated on the project.
  • refresh (() => void): Function to refresh the data.

​
Example

import { useEmbeddedIntegrationPageQuery } from '../hooks/useEmbeddedIntegrationPageQuery';

export function ProjectList() {
    const { isLoading, error, projects, refresh } = useEmbeddedIntegrationPageQuery({ deployed: true });

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

    return (
        <ul>
            {projects.map((project) => (
                <li key={project.id}>{project.name}</li>
            ))}
        </ul>
    );
}