# @apideck/vault-react
> React hook for the Apideck Vault component.
Latest version **1.4.2** (published 2026-05-13) · MIT license · 0 weekly downloads
## Install
```sh
npm install @apideck/vault-react
pnpm add @apideck/vault-react
yarn add @apideck/vault-react
bun add @apideck/vault-react
```
## Health
**Score 55/100 (C)** — status: active.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 1.4.2 |
| Published | 2026-05-13 |
| First published | 2023-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 18.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jake Prins |
| Maintainers | gdewilde, nicklloyd, ritiksingh7, samzani, lagoni, jakeprins, gmenoiaa |
| Keywords | apideck, vault, react |
## Links
- npm: https://www.npmjs.com/package/@apideck/vault-react
- Repository: https://github.com/apideck-libraries/vault-react
- Homepage: https://github.com/apideck-libraries/vault-react#readme
- Issues: https://github.com/apideck-libraries/vault-react/issues
- npm.io page: https://npm.io/package/@apideck/vault-react
## Dependencies (1)
- [@apideck/vault-js](https://npm.io/package/@apideck/vault-js.md) ^1.8.1
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.4.2 (latest) — 2026-05-13
- 1.4.1 — 2026-05-13
- 1.4.0 — 2025-07-02
- 1.3.1 — 2024-01-31
- 1.3.0 — 2024-01-31
- 1.2.0 — 2024-01-25
- 1.1.2 — 2023-10-19
- 1.1.1 — 2023-10-19
- 1.1.0 — 2023-10-17
- 1.0.6 — 2023-08-14
- 1.0.5 — 2023-08-14
- 1.0.4 — 2023-08-14
- 1.0.3 — 2023-08-14
- 1.0.2 — 2023-08-14
## README
# Vault React
A React hook to easily embed [Apideck Vault](https://www.apideck.com/products/vault) in any React application.
**Vault React** | [Vault Vue](https://github.com/apideck-libraries/vue-vault) | [Vault JS](https://github.com/apideck-libraries/vault-js)
## Installation
### Package
```sh
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](https://docs.apideck.com/sdks). Find out more in the [docs](https://docs.apideck.com/apis/vault/reference#operation/sessionsCreate).
## Usage
Pass the JWT you got from the Vault session to the `open` function to open the Vault modal.
```tsx
import { useVault } from '@apideck/vault-react';
function App() {
const { open } = useVault();
return (
);
}
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.
```tsx
import { useVault } from '@apideck/vault-react';
function App() {
const { open } = useVault();
return (
);
}
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.
```tsx
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 (
);
}
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`.
```js
import { useVault } from '@apideck/vault-react';
function App() {
const { open, close } = useVault();
return (
);
}
```
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`.
```js
import { useVault } from '@apideck/vault-react';
function App() {
const { open, close } = useVault();
return (
);
}
```
If you want to show the language switch at the bottom you can provide the `showLanguageSwitch` prop.
```js
import { useVault } from '@apideck/vault-react';
function App() {
const { open, close } = useVault();
return (
);
}
```
---
_Source: https://npm.io/package/@apideck/vault-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
**Vault React** | [Vault Vue](https://github.com/apideck-libraries/vue-vault) | [Vault JS](https://github.com/apideck-libraries/vault-js)
## Installation
### Package
```sh
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](https://docs.apideck.com/sdks). Find out more in the [docs](https://docs.apideck.com/apis/vault/reference#operation/sessionsCreate).
## Usage
Pass the JWT you got from the Vault session to the `open` function to open the Vault modal.
```tsx
import { useVault } from '@apideck/vault-react';
function App() {
const { open } = useVault();
return (
);
}
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.
```tsx
import { useVault } from '@apideck/vault-react';
function App() {
const { open } = useVault();
return (
);
}
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.
```tsx
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 (
);
}
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`.
```js
import { useVault } from '@apideck/vault-react';
function App() {
const { open, close } = useVault();
return (
);
}
```
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`.
```js
import { useVault } from '@apideck/vault-react';
function App() {
const { open, close } = useVault();
return (
);
}
```
If you want to show the language switch at the bottom you can provide the `showLanguageSwitch` prop.
```js
import { useVault } from '@apideck/vault-react';
function App() {
const { open, close } = useVault();
return (
);
}
```
---
_Source: https://npm.io/package/@apideck/vault-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._