React, over the same SDK

Import React helpers from @ispo/sdk/react. Core calls stay in @ispo/sdk; adapters share the same transport, errors, permissions, and subscriptions.

The host-generated bootstrap connects the SDK before loading the app. Keep exactly one ISPOProvider and mount AppReadyBeacon inside it to report the first committed render. Do not reconnect the bridge from a component.

Render live entity data

This component assumes your project has registered a notes.note entity type with a string title field, and has reviewed request eligibility and a grant to read it. Substitute your app's registered type. The hook maintains the live query and disposes its subscription with the component.

import { AppReadyBeacon, ISPOProvider, useLiveEntityQuery } from '@ispo/sdk/react'

interface Note {
  title: string
}

function Notes() {
  const { records, status, error } = useLiveEntityQuery<Note>('notes.note')

  if (status === 'denied') return <p>Allow access to read your notes.</p>
  if (error) return <p>{error.message}</p>
  if (status !== 'live') return <p>Connecting to your notes…</p>
  if (records.length === 0) return <p>No notes are visible to this app.</p>

  return <ul>{records.map((note) => <li key={note.id}>{note.data.title}</li>)}</ul>
}

export function App() {
  return <ISPOProvider><AppReadyBeacon /><Notes /></ISPOProvider>
}
Copy

Keep connecting, denied, and error states visible. Do not substitute fabricated records when data is unavailable. A generic TypeScript type describes the data you expect; it does not register an entity schema or grant access.

For larger views, useLiveEntityQuery also accepts a selector and equality function. ISPOProvider accepts a client when you need to provide one explicitly. Browse the react module for their current signatures.