Vaultrice React SDK

A set of React hooks and utilities for building real-time, offline-first, and optionally end-to-end encrypted applications using Vaultrice NonLocalStorage.
Under the hood, @vaultrice/react uses @vaultrice/sdk for all storage, sync, and presence features.

Vaultrice is ideal for collaborative apps, cross-device sync, and privacy-sensitive use cases—without custom backend infrastructure.

---

Table of Contents

1. Features
2. Installation
3. Quick Start
4. Core Hooks
5. Example: Collaborative Counter
6. Helpers
7. Related Packages

---

Features

• Offline-first: Local queueing and automatic sync when online.
• Real-time presence & messaging: Built-in WebSocket support for live updates and user presence.
• End-to-end encryption: Optional client-side encryption for sensitive data.
• Cross-device sync: Seamless state sharing across browsers and devices.
• TTL & metadata: Per-key expiration and rich metadata.
• Easy integration: Simple React hooks for state, counters, messaging, and more.

---

Installation

npm install @vaultrice/react
Copy

---

Quick Start

import { useNonLocalState } from '@vaultrice/react'

const [value, setValue, error] = useNonLocalState<string>('myRoom', 'myKey', {
  credentials: {
    projectId: 'YOUR_PROJECT_ID',
    apiKey: 'YOUR_API_KEY',
    apiSecret: 'YOUR_API_SECRET'
  }
})

// Use value in your UI, update with setValue(newValue)
Copy

---

Core Hooks

• useNonLocalState – Manage a single value with real-time sync.
• useMultiNonLocalStates – Manage multiple keys atomically.
• useNonLocalCounter – Atomic increment/decrement for counters.
• useMessaging – Real-time messaging and presence.
• createNonLocalStore – Simple fetch/post API for a single key, eg. to be used with tanstack query / mutation.

---

Example: Collaborative Counter

import { useNonLocalCounter } from '@vaultrice/react'

const [count, increment, decrement, error] = useNonLocalCounter('roomId', 'counterKey', { credentials: { ... } })

<button onClick={() => increment()}>+1</button>
<button onClick={() => decrement()}>-1</button>
<p>Current count: {count}</p>
Copy

---

Helpers

credentials

You can initialize your credentials in a single place to be reused:

// eg. in your index.ts
import { vaultrice } from '@vaultrice/react'

vaultrice.init(credentials)

// in your components
import { useNonLocalState } from '@vaultrice/react'

const [value, setValue] = useNonLocalState<string>('objectId', 'myKey'}

Copy

offline-capable NonLocalStorage

To take advantage of the offline-capable NonLocalStorage you will have to prepare the instances before usage, like:

// eg. in your index.ts
import { prepareOfflineNonLocalStorage } from '@vaultrice/react'

prepareOfflineNonLocalStorage('objectId', credentials)

// in your components it will pick up the prepared offline variant
import { useNonLocalState } from '@vaultrice/react'

const [value, setValue] = useNonLocalState<string>('objectId', 'myKey'}

Copy

Related Packages

• Vaultrice TS/JS SDK
• Vaultrice React.js Compoments

Support

Have questions, ideas or feedback? Open an issue or email us at support@vaultrice.com

---

Made with ❤️ for developers who need real-time storage, without the backend hassle.

Try Vaultrice for free!