Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/hypertekorg/hyperstack/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The HyperstackProvider is the root component that manages WebSocket connections and provides context to all Hyperstack hooks in your React application.

​
Setup

Wrap your application with HyperstackProvider: 
import { HyperstackProvider } from 'hyperstack-react';

function App() {
  return (
    <HyperstackProvider autoConnect={true}>
      <YourApp />
    </HyperstackProvider>
  );
}

​
Props

​
autoConnect
boolean
default:"false"
Automatically connect to the stack when hooks are mounted
​
wallet
WalletAdapter
Wallet adapter for signing transactions (optional)
​
reconnectIntervals
number[]
Array of milliseconds to wait between reconnection attempts
<HyperstackProvider reconnectIntervals={[1000, 2000, 5000]} />
​
maxReconnectAttempts
number
Maximum number of reconnection attempts before giving up
​
maxEntriesPerView
number | null
Maximum number of entities to keep in memory per view. When exceeded, oldest entries are evicted.
​
flushIntervalMs
number
default:"16"
Interval in milliseconds for batching storage updates (16ms = 60fps)
​
fallback
ReactNode
Optional fallback UI to show while connecting (not commonly used)

​
Configuration Example

import { HyperstackProvider } from 'hyperstack-react';

function App() {
  return (
    <HyperstackProvider
      autoConnect={true}
      reconnectIntervals={[1000, 2000, 5000, 10000]}
      maxReconnectAttempts={5}
      maxEntriesPerView={1000}
      flushIntervalMs={16}
    >
      <Dashboard />
    </HyperstackProvider>
  );
}

​
URL Configuration

The WebSocket URL is not configured in the provider. Instead:
  1. The URL is embedded in your stack definition (stack.url)
  2. You can override it per-hook using useHyperstack(stack, { url: 'ws://localhost:3000' })

​
Context Hooks

These low-level hooks are available but rarely needed:

​
useHyperstackContext

Access the internal Hyperstack context: 
import { useHyperstackContext } from 'hyperstack-react';

function MyComponent() {
  const { getClient, config } = useHyperstackContext();
  // ...
}

​
useConnectionState

Monitor connection state for a specific stack: 
import { useConnectionState } from 'hyperstack-react';
import { MY_STACK } from './stack';

function ConnectionStatus() {
  const state = useConnectionState(MY_STACK);
  // state: 'connected' | 'connecting' | 'disconnected' | 'error'
  
  return <div>Status: {state}</div>;
}

​
useView (Low-level)

Direct view access without schema validation: 
import { useView } from 'hyperstack-react';
import { MY_STACK } from './stack';

function MyComponent() {
  const items = useView<MyType>(MY_STACK, 'view_path');
  // Returns raw array, no loading state
}

​
useEntity (Low-level)

Direct entity access by key: 
import { useEntity } from 'hyperstack-react';
import { MY_STACK } from './stack';

function MyComponent() {
  const entity = useEntity<MyType>(MY_STACK, 'view_path', 'entity_key');
  // Returns single entity or null
}
Prefer using useHyperstack() with typed view hooks instead of these low-level primitives.

​
Storage Architecture

The provider uses a Zustand-based storage adapter that:
  • Provides reactive updates to all subscribed components
  • Batches updates based on flushIntervalMs for performance
  • Manages connection state globally
  • Handles automatic cache eviction when maxEntriesPerView is set

​
Next Steps

React Hooks

Learn about useHyperstack and view hooks

Mutations

Execute instructions with useInstructionMutation

Build docs developers (and LLMs) love

Get started for freeTalk to us