Provider Setup

React UI components require two providers:

1. SDKProvider — Provides SDK access token
2. EntitiesProvider — Tracks the active entity

Full Setup

Provider Setuptypescript

Copy

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { EntitiesProvider } from "./providers/entities-provider";
import { SDKProvider } from "./providers/sdk-provider";

const queryClient = new QueryClient();

export function App() {
  return (
    
      "https://eu.spaceinvoices.com" getAccessToken={() => localStorage.getItem("access_token")}>
        
          {/* Your app components */}
          
        
      
    
  );
}

SDKProvider

The SDKProvider initializes the Space Invoices SDK and makes it available to all components.

Props

Prop	Type	Description
apiUrl	string	API base URL
getAccessToken	() => string | null	Function that returns the access token

Getting the Token

How you get the token depends on your auth setup:

Token Providerstypescript

Copy

// From localStorage
const fromLocalStorage = () => localStorage.getItem("si_token");

// From a cookie
const _fromCookie = () => document.cookie.match(/token=([^;]+)/)?.[1] ?? null;

// From an auth library (e.g., NextAuth)
const _fromSession = (session) => session?.accessToken ?? null;

// Usage in SDKProvider:
"https://eu.spaceinvoices.com" getAccessToken={fromLocalStorage}>
  {/* or getAccessToken={fromCookie} */}
  {/* or getAccessToken={() => fromSession(session)} */}
;

EntitiesProvider

The EntitiesProvider manages entity selection for multi-entity apps.

Using Active Entity

Using Active Entitytypescript

Copy

import { useEntities } from "@/providers/entities-provider";

function _InvoicesPage() {
  const { activeEntity, isLoading } = useEntities();

  if (isLoading) return ;
  if (!activeEntity) return ;

  return id} onRowClick={(inv) => navigate(`/invoices/${inv.id}`)} />;
}

Entity Switching

Entity Switchingtypescript

Copy

import { useEntities } from "@/providers/entities-provider";

function _EntitySelector() {
  const { entities, activeEntity, setActiveEntity } = useEntities();

  return (
    id}
      onValueChange={(id) => {
        const entity = entities.find((e) => e.id === id);
        if (entity) setActiveEntity(entity);
      }}
    >
      {entities.map((entity) => (
        id} value={entity.id}>
          {entity.name}
        
      ))}
    
  );
}

Accessing the SDK Directly

Components use the SDK internally, but you can access it directly:

Direct SDK Accesstypescript

Copy

import { useSDK } from "@/providers/sdk-provider";

function _CustomComponent() {
  const { sdk } = useSDK();

  const handleCustomAction = async () => {
    // Use SDK directly for custom operations
    const result = await sdk.invoices.renderPdf({ id: invoiceId });
    downloadBlob(result, "invoice.pdf");
  };

  return Download PDF;
}

Next Steps

• Components — Available components
• Customization — Modify components