Neverending Programming Mistakes

    @vesselapi/react-vessel-link
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.6 • Public • Published

    react-vessel-link

    This package provides:

    1. A React button component that launches the Vessel connect modal.
    2. 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:

    1. Through the VesselConnectButton component.
    2. 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.

    Keywords

    none

    Install

    npm i @vesselapi/react-vessel-link

    DownloadsWeekly Downloads

    994

    Version

    1.1.6

    License

    MIT

    Unpacked Size

    38.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • zkirby