@vesselapi/react-vessel-link NPM

react-vessel-link

This package provides:

A React button component that launches the Vessel connect modal.
A Hook that can be used to launch the modal manually.

Installing:

npm:

npm install @vesselapi/react-vessel-link

yarn:

yarn add @vesselapi/react-vessel-link

Usage

The vessel-link modal can be triggered using two methods:

Through the VesselConnectButton component.
Through the useVesselLink hook.

Here are some example uses of each:

function App() {
  return (
    <VesselConnectButton
      getLinkToken={async () => await api.post('link/token')}
      onSuccess={(publicToken) => console.log('public token: ', publicToken)}
      onClose={() => console.log('closed')}
      onLoad={() => console.log('loaded')}
    >
      Connect your CRM!
    </VesselConnectButton>
  );
}

function App() {
  const { open } = useVesselLink({
    onSuccess: (publicToken) => console.log('public token: ', publicToken),
    onClose: () => console.log('closed'),
    onLoad: () => console.log('loaded'),
  });

  return <button onClick={() => open({ linkToken })}>Connect your CRM!</button>;
}

If you'd like to directly open to the auth flow for a specific integration without having the user go through the selection flow, you can pass an integrationId to the open function returned by useVesselLink. Currently, this is only supported when using the useVesselLink hook.

Here's an example of embedding the integrations directly into your application:

function App() {
  const { open } = useVesselLink({
    onSuccess: (publicToken) => console.log('public token: ', publicToken),
    onClose: () => console.log('closed'),
    onLoad: () => console.log('loaded'),
  });

  return (
    <div>
      <button
        onClick={async () =>
          open({
            integrationId: 'salesforce',
            linkToken: await getLinkToken(),
          })
        }
      >
        Connect Salesforce
      </button>
      <button
        onClick={async () =>
          open({
            integrationId: 'hubspot',
            linkToken: await getLinkToken(),
          })
        }
      >
        Connect HubSpot
      </button>
    </div>
  );
}