@apideck/vault-react

Vault React

A React hook to easily embed Apideck Vault in any React application.

Vault React | Vault Vue | Vault JS

Installation

Package

npm install @apideck/vault-react

Prerequisites

Before opening the Vault modal with @apideck/vault-react, you need to create a Vault session from your backend using the Vault API or one of our SDKs. Find out more in the docs.

Usage

Pass the JWT you got from the Vault session to the open function to open the Vault modal.

import { useVault } from '@apideck/vault-react';

function App() {
  const { open } = useVault();

  return (
    <button onClick={() => open({ token: 'REPLACE_WITH_SESSION_TOKEN' })}>
      Open Vault
    </button>
  );
}

export default App;

If you want to only show integrations for a single Unified API, you can do that by passing the unifiedApi prop. If you want to open Vault for only a single integration, you can provide the serviceId prop.

import { useVault } from '@apideck/vault-react';

function App() {
  const { open } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          unifiedApi: 'file-storage',
          serviceId: 'dropbox',
        })
      }
    >
      Open Vault
    </button>
  );
}

export default App;

If you want to get notified when the modal opens and closes, you can provide the onReady and onClose options. You can also provide the onConnectionChange and onConnectionDelete options to get notified when the state of a connection changes or gets deleted.

import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  function onClose() {
    console.log('close!');
  }

  function onReady() {
    console.log('ready!');
  }

  function onConnectionChange(connection: Connection) {
    console.log('changed!', connection);
    if (connection.state === 'callable') {
      close();
    }
  }

  function onConnectionDelete(connection: Connection) {
    console.log('ready!', connection);
  }

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          onReady,
          onClose,
          onConnectionChange,
          onConnectionDelete,
        })
      }
    >
      Open Vault
    </button>
  );
}

export default App;

If you want to open a specific view you can pass the initialView prop. The available views are settings, configurable-resources, and custom-mapping.

import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          unifiedApi: 'accounting',
          serviceId: 'quickbooks',
          initialView: 'custom-mapping',
        })
      }
    >
      Open Vault
    </button>
  );
}

If you want to open vault in a specific language you can pass a locale. The available locales are en (default), nl, de, fr, and es.

import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          locale: 'nl',
        })
      }
    >
      Open Vault
    </button>
  );
}

If you want to show the language switch at the bottom you can provide the showLanguageSwitch prop.

import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          locale: 'nl',
          showLanguageSwitch: true,
        })
      }
    >
      Open Vault
    </button>
  );
}