Hyperstack React SDK

React SDK for real-time Solana program data streaming from Hyperstack.

Built on top of hyperstack-typescript, the pure TypeScript core SDK.

Installation

``bash
npm install hyperstack-react
`

> Not using React? Use hyperstack-typescript directly for Vue, Svelte, Node.js, or vanilla JavaScript.

Usage

$3

`tsx
import { HyperstackProvider, useHyperstack, defineStack } from 'hyperstack-react';

const myStack = defineStack({
// Your stack configuration
});

function App() {
return (
your config / }}>


);
}

function MyComponent() {
const stack = useHyperstack(myStack);
// Use your stack
}
`

$3

- Real-time Data Streaming: Subscribe to Solana program state changes
- React Integration: Hooks-based API for easy integration with React applications
- State Management: Built-in state management with Zustand
- Type Safety: Full TypeScript support with comprehensive type definitions
- View Definitions: Create state and list views for your data
- Transaction Handling: Define and execute transactions with hooks
- Single Item Queries: Type-safe single item fetching with take: 1 or useOne()

$3

#### Providers

- HyperstackProvider - Root provider for Hyperstack configuration

#### Hooks

- useHyperstack - Main hook for accessing stack functionality
- useHyperstackContext - Access the runtime context directly

#### View Methods

- .use() - Subscribe to view data (returns T[] for lists, T for state)
- .use({ take: 1 }) - Subscribe to single item with type narrowing (returns T | undefined)
- .useOne() - Convenience method for single item queries (returns T | undefined)

#### Factory Functions

- defineStack - Define a new stack configuration
- createStateView - Create a state view
- createListView - Create a list view
- createRuntime - Create a runtime instance

#### Utilities

- ConnectionManager - Manage WebSocket connections

Relationship with hyperstack-typescript

This package depends on and re-exports the core hyperstack-typescript package. The core SDK provides:

- HyperStack - Main client class
- ConnectionManager - WebSocket connection handling
- EntityStore - State management
- AsyncIterable-based streaming APIs

The React SDK adds:

- HyperstackProvider - React context provider
- useHyperstack - Main hook for accessing stacks
- useConnectionState - Connection monitoring hook
- defineStack, createStateView, createListView - React-friendly factories

If you need low-level access, you can import directly from the core:

`typescript
import { HyperStack, ConnectionManager } from 'hyperstack-react';
// or
import { HyperStack, ConnectionManager } from 'hyperstack-typescript';
``

License

MIT

Author

HyperTek