Prebuilt UI components

npm install @amp-labs/react

yarn add @amp-labs/react

import { AmpersandProvider } from '@amp-labs/react';

const options = {
  project: 'PROJECT', // Your Ampersand project name or ID

  // Pick one of the following authentication methods:
  apiKey: 'API_KEY',  // Ampersand API key (simple)
  // OR 
  getToken: async ({consumerRef, groupRef}) => {  // JWT Authentication (advanced)
    // Custom logic to fetch JWT token from your backend, e.g.
    return await getTokenFromMyBackend(consumerRef, groupRef);
  },
};

function App() {
  return (
    <AmpersandProvider options={options}>
      {/* All your Ampersand components and hooks go here */}
    </AmpersandProvider>
  );
}

const options = {
  project: 'PROJECT',
  getToken: async ({consumerRef, groupRef}) => {
    // Custom logic to fetch JWT token from your backend, e.g.
    return await getTokenFromMyBackend(consumerRef, groupRef);
  },
};
return (
  <AmpersandProvider options={options}>
    {/* All your Ampersand components and hooks go here */}
  </AmpersandProvider>
);

 <InstallIntegration 
  integration = {myIntegrationName}
  consumerRef = {userId}
  consumerName = {userFullName}
  groupRef = {teamId}
  groupName = {teamName}
  onInstallSuccess = {(installationId, configObject) =>
    console.log(`Successfully installed ${installationId}`
      + `with configuration ${JSON.stringify(configObject, null, 2)}`)
  }
  onUpdateSuccess = {(installationId, configObject) =>
    console.log(`Successfully updated ${installationId}`
      + ` with configuration ${JSON.stringify(configObject, null, 2)}`)
  }
  onUninstallSuccess = {(installationId) =>
    console.log(`Successfully uninstalled ${installationId}`)
  }
  fieldMapping={{
    contacts: [
      {
        mapToName: 'priority',
        mapToDisplayName: 'Priority',
        prompt: 'Which field do you use to track the priority of a deal?',
      },
      ... // other field mapping options
    ],
  }}
/>

 <ConnectProvider 
  provider = "salesforce"
  consumerRef = {userId}
  consumerName = {userFullName}
  groupRef = {teamId}
  groupName = {teamName}
  redirectUrl = "/connection-success"
  onConnectSuccess = {connection =>
    console.log(`Successfully created connection ${connection.id}`)
  }
  onDisconnectSuccess = {connection =>
    console.log(`Successfully deleted connection ${connection.id}`)
  }
/>

const {
  isLoaded,
  isIntegrationInstalled
} = useIsIntegrationInstalled("read-salesforce", groupRef);

const {
  isLoaded,
  isIntegrationInstalled, 
  config,
} = useIsIntegrationInstalled("read-salesforce", groupRef);

// All 3 read objects are installed
if (isLoaded && isIntegrationInstalled && config.read.objects.length === 3) {
  // Do something 
}

// check if the Account object is installed
if (isLoaded && isIntegrationInstalled && config.read.objects.filter(o => o.objectName === "Account").length === 1) {
  // Do something 
}

// All 3 write objects are installed
if (isLoaded && isIntegrationInstalled && config.write.objects === 3) {
  // Do something 
}

import { AmpersandProvider } from '@amp-labs/react';
import '@amp-labs/react/styles';
import './App.css'; // Optional: your own css override

:root {
  color-scheme: light dark;
}

import { AmpersandProvider, InstallIntegration } from '@amp-labs/react';
import '@amp-labs/react/styles'; // Add this line when migrating to v2
import './App.css'; // Optional: your own CSS override 

import '@amp-labs/react/styles';