@qubic-labs/react

React bindings for @qubic-labs/sdk built on @tanstack/react-query.

Install

bun add @qubic-labs/react @qubic-labs/sdk @tanstack/react-query react react-dom

Next.js

@qubic-labs/sdk (via @qubic-labs/core) includes Node-only modules (for example node:net). In Next.js, importing it from a Client Component will fail during bundling.

Use it from a Server Component or Route Handler instead, then call it from the client.

Quick start

import { QueryClient } from "@tanstack/react-query";
import { createSdk } from "@qubic-labs/sdk";
import { QubicQueryProvider, SdkProvider, useBalance } from "@qubic-labs/react";

const queryClient = new QueryClient();
const sdk = createSdk({ baseUrl: "https://rpc.qubic.org" });

function BalanceCard({ identity }: { identity: string }) {
  const balance = useBalance(identity, { refetchInterval: 10_000 });
  if (balance.isLoading) return <div>Loading...</div>;
  if (balance.error) return <div>{balance.error.message}</div>;
  return <div>Balance: {balance.data?.balance}</div>;
}

export function App() {
  return (
    <SdkProvider sdk={sdk}>
      <QubicQueryProvider client={queryClient}>
        <BalanceCard identity="..." />
      </QubicQueryProvider>
    </SdkProvider>
  );
}

Docs

• docs/setup.md
• docs/hooks.md
• docs/qbi.md
• docs/wallets.md
• docs/vaults.md

Examples

• examples/basic.tsx
• examples/transactions.tsx
• examples/qbi.tsx

Local development (monorepo)

# from jskit-react/
bun add @qubic-labs/sdk@file:../jskit-sdk