@trustgraph/react-provider

React provider for TrustGraph WebSocket connections. This package provides a headless React context provider for managing TrustGraph WebSocket connections in React applications.

Features

- 🎯 Headless Design - Bring your own UI components
- 🔄 Auto-reconnection - Handles connection lifecycle automatically
- 🔐 Authentication Support - Optional API key authentication
- 📦 TypeScript - Full type safety
- ⚡ Lightweight - Minimal dependencies

Installation

``bash
npm install @trustgraph/react-provider @trustgraph/client react
`

Basic Usage

`tsx
import { SocketProvider, useSocket } from "@trustgraph/react-provider";

function App() {
return (



);
}

function MyComponent() {
const socket = useSocket();

const handleQuery = async () => {
const results = await socket.triplesQuery(
{ v: "http://example.org/subject", e: true },
undefined,
undefined,
10,
);
console.log(results);
};

return Query;
}
`

With Authentication

`tsx



`

With Custom Loading UI

`tsx
user="alice"
loadingComponent={

`tsx
import { useConnectionState } from "@trustgraph/react-provider";

function ConnectionStatus() {
const state = useConnectionState();

if (!state) return

- user: string - TrustGraph user identifier (required)
- apiKey?: string - Optional API key for authentication
- loadingComponent?: ReactNode - Custom loading component
- onConnectionStateChange?: (state: ConnectionState | null) => void - Connection state callback
- onSocketReady?: (socket: BaseApi) => void - Socket ready callback

$3

Hook to access the socket instance.

Returns: BaseApi

Throws: Error if used outside SocketProvider

$3

Hook to access the connection state.

Returns: ConnectionState | null`

Throws: Error if used outside SocketProvider

License

Apache 2.0

(c) KnowNext Inc., KnowNext Limited 2025