Skip to content
SparkleTree SparkleTree Docs

SparkletreeProviderProps

Defined in: react/src/provider.tsx:57

@sparkletree/react — React bindings for the SparkleTree SDK.

Two layers, and the boundary between them is the whole design:

  • PRIMITIVES (StreamText, useIsland) live in npm. They speak the wire, own the choreography, and carry the trust chrome structurally. They are ours to patch.
  • COMPONENTS (Hero, Cta) also ship as copy-paste source through sparkletree add. Those copies are the customer’s, and they are wire-ignorant by construction — no event names, no protocol versions, no timing constants — so a protocol change never obliges a customer to re-copy anything.

Properties

Section titled “Properties”

apiBase?

Section titled “apiBase?”

optional apiBase?: string

Defined in: react/src/provider.tsx:60

Optional when publishableKey is given; when both are set, the explicit prop wins (the documented escape hatch for self-hosted bases).

children

Section titled “children”

children: ReactNode

Defined in: react/src/provider.tsx:98

context?

Section titled “context?”

optional context?: Record<string, unknown>

Defined in: react/src/provider.tsx:83

Extra context merged over the automatically collected signals. Anything here wins — a host that knows its own audience knows better than our inference does.

Must be JSON-serializable (it is sent on the wire as JSON regardless). Identity is derived from CONTENT, so an inline context={{ ... }} object re-created on every parent render is fine: structurally equal context does not re-open any island’s stream.

fetchImpl?

Section titled “fetchImpl?”

optional fetchImpl?: (input, init?) => Promise<Response>

Defined in: react/src/provider.tsx:99

MDN Reference

Parameters

Section titled “Parameters”
input
Section titled “input”

URL | RequestInfo

init?
Section titled “init?”

RequestInit

Returns

Section titled “Returns”

Promise<Response>

mintToken?

Section titled “mintToken?”

optional mintToken?: MintTokenSource

Defined in: react/src/provider.tsx:97

A signed mint token, or a function returning one (sync or async).

Optional. Without it fragments still mint, gated on the request Origin — which authenticates a browser and nothing else. A token is issued by YOUR backend (POST /api/embed/v1/fragments/mint-token with an st_ API key) and is what actually pins mint spend to your org.

Prefer the function form: tokens expire after 300 seconds, and a page open longer than that would otherwise echo a dead one. Define it outside render (or wrap it in useCallback) — like fetchImpl, a new identity each render re-renders this provider’s consumers.

organizationId?

Section titled “organizationId?”

optional organizationId?: string

Defined in: react/src/provider.tsx:62

Optional when publishableKey is given; explicit prop wins.

publishableKey?

Section titled “publishableKey?”

optional publishableKey?: string

Defined in: react/src/provider.tsx:72

st_pk_live_… / st_pk_test_… from the dashboard — base64url { organizationId, apiBase }, decoded locally with zero network.

It is NOT a credential; it is an address. The read path is unauthenticated by design and security lives in the origin registry, so shipping this string in page source exposes nothing that the page’s own embed markup does not already.

storage?

Section titled “storage?”

optional storage?: Storage

Defined in: react/src/provider.tsx:110

Where the viewer’s trust-chrome preference is persisted. Defaults to window.localStorage.

Injectable because ambient storage is not reliably there: a consent manager may gate it, a privacy mode may throw on access, and Node 18+ exposes a same-named global that shadows the real one — under Node 26 + jsdom, window.localStorage is undefined outright. A preference that silently cannot be stored is a viewer whose choice we ignore.