Connectifi Agent for React

The Connectifi Agent for React is a react friendly wrapper around the web agent.

• AgentImportProvider - top level react context provider that facilitates importing the agent from the interop server
• AgentProvider - lower level react context provider that exposes the instance of the agent to child components
• useConnectifiAgent - hook that creates/returns the agent instance

Getting started

To get started, simply install the module into your application:

npm install @connectifi/agent-react

Using the components

The first thing to do is setup the AgentImportProvider at the top level (or very high) of your component hierarchy. For example, a good place to put this is where you handle any UI themeing. After that, a page level component that uses the AgentProvider and useConnectifiAgent hook in tandem.

The AgentImportProvider

This sets up the import context used by the useConnectifiAgent hook. it is best to put this at the top of the app's component hierarchy. For example, if using next.js, this provider component would go in /pages/_app.tsx (or /app/layout.tsx if using the app router).

import { AgentImportProvider } from '@connectifi/agent-react';

...

function MyApp({ Component, pageProps }: AppProps) {
  const interopUrl = 'https://platform.connectifi.app';

  return (
    <AgentImportProvider interopUrl={interopUrl}>
      <Component {...pageProps} />
    </AgentImportProvider>
  ) : null;
}

The AgentProvider and useConnectifiAgent hook

The AgentProvider and hook work together to provide all the child components with a reference to the instantiated FDC3 api as well as provide current agent status etc.

import { AgentProvider, useConnectifiAgent } from '@connectifi/agent-react';

...
interface Props {
  children: ReactElement | ReactElement[];
}

export function AgentPageLayout({ children }: Props) {
  const agent = useConnectifiAgent({ appId: 'myApp@12345678' });

  return (
    <div>
      <AgentProvider agent={agent}>
        {children}
      </AgentProvider>
      <CustomAgentUI agent={agent} />
    </div>
  );
}