React Package

React package provides you with the following:

• Hooks that simplify working with remote data provided by our Javascript SDK from React components. They wrap lifecycle of asynchronous operations, deal with pagination, etc.
• UI Components for implementing standard parts of integration UI such as connecting external apps, configuring integrations, building workflows, etc.

Getting Started

First, install @integration-app/react NPM package:

npm install @integration-app/react

Then, wrap the part of your app that deals with integrations into IntegrationAppProvider:

import { IntegrationAppProvider } from '@integration-app/react'

export function MyApp() {
  return (
    <IntegrationAppProvider token='{TOKEN}'>
      <MyComponent />
    </IntegrationAppProvider>
  )
}

This example uses your test token. For production, you should generate a token on your backend and pass it to your React app: Authentication.

Dynamic Token

If it is more convenient for you to fetch token dynamically instead of providing static value, you can use fetchToken instead:

async function fetchToken() {
  const token = await myTokenFetcher(.....);
  return token;
}

export function MyApp() {
  return (
    <IntegrationAppProvider fetchToken={fetchToken}>
      <MyComponent />
    </IntegrationAppProvider>
  )
}

This option also automatically handles token expiration. If token was initialized long ago and token had time to expire, it will be automatically re-fetched before making new API requests.

Next.js

Since the introduction of React Server Components (RSC) in Next.js 13, files that use the package must include the 'use client' directive to work correctly.

Reference

You can find the full reference for the React package here: React Library Reference