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>
);
}
Issues/Questions
Contact us at support@vessel.land
.