README.md

@octaspace/sdk-react

React context and hooks for the OctaSpace SDK.

---

Installation

npm install @octaspace/sdk @octaspace/sdk-react react
# or
pnpm add @octaspace/sdk @octaspace/sdk-react react

Requires React 18+.

---

Quick Start

import { OctaClient } from '@octaspace/sdk'
import { OctaProvider, useNodes } from '@octaspace/sdk-react'

const client = new OctaClient({ apiKey: process.env.OCTA_API_KEY })

function NodeList() {
  const { data: nodes, loading, error, refetch } = useNodes()

  if (loading) return <p>Loading...</p>
  if (error) return <p>{error.message}</p>

  return (
    <div>
      <button onClick={refetch}>Refresh</button>
      <pre>{JSON.stringify(nodes, null, 2)}</pre>
    </div>
  )
}

export function App() {
  return (
    <OctaProvider client={client}>
      <NodeList />
    </OctaProvider>
  )
}

---

Included Hooks

• useAccount()
• useBalance()
• useApps()
• useNetworkStats()
• useNodes()
• useNode(id)
• useMrAvailable()
• useRenderAvailable()
• useVpnAvailable()
• useServiceSessionInfo(uuid)
• useServiceSessionLogs(uuid)
• useSessions(options?)
• useIdleJob(nodeId, jobId)
• useIdleJobLogs(nodeId, jobId)

All hooks return the same shape:

{
  data,
  error,
  loading,
  refetch,
}

refetch() triggers a new request. Requests are automatically cancelled on unmount or dependency change through AbortController.

Public-only clients are supported too:

const client = new OctaClient({})

function NetworkBadge() {
  const { data } = useNetworkStats()
  return <span>{data?.market_price}</span>
}

---

Provider

import { OctaProvider } from '@octaspace/sdk-react'

<OctaProvider client={client}>{children}</OctaProvider>

Use useOctaClient() to access the raw OctaClient from React context.

Testing

Package tests run with @testing-library/react and jsdom.

---

License

MIT © OctaSpace