Skip to content

Framework Examples

React

React Exampletypescript
import { SpaceInvoices } from "@spaceinvoices/embed-sdk";
import { useEffect, useRef } from "react";

function _InvoiceEmbed({ entityId, apiKey }) {
  const containerRef = useRef(null);
  const sdkRef = useRefnull>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    sdkRef.current = new SpaceInvoices({
      apiKey,
      entityId,
      onAction: (action) => {
        if (action.type === "document_created") {
        }
      },
    });

    sdkRef.current.open("invoices", {
      container: containerRef.current,
    });

    return () => {
      sdkRef.current?.destroy();
    };
  }, [apiKey, entityId]);

  return 
"600px" }} />; }

Vue

Vue Examplehtml


Next.js

Next.js Exampletypescript
"use client";

import { SpaceInvoices } from "@spaceinvoices/embed-sdk";
import { useEffect, useRef } from "react";

export function InvoiceEmbed({ entityId, apiKey }) {
  const containerRef = useRef(null);
  const sdkRef = useRefnull>(null);

  useEffect(() => {
    // Only run on client
    if (typeof window === "undefined" || !containerRef.current) return;

    sdkRef.current = new SpaceInvoices({
      apiKey,
      entityId,
    });

    sdkRef.current.open("invoices", {
      container: containerRef.current,
    });

    return () => {
      sdkRef.current?.destroy();
    };
  }, [apiKey, entityId]);

  return 
"h-[600px]" />; }

Vanilla JavaScript

Vanilla JavaScripthtml



  Space Invoices Embed
  


  

Best Practices

  1. Always clean up — Call destroy() when unmounting components
  2. Handle loading states — Use onReady to show loading indicators
  3. Handle errors — Implement onError for graceful error handling
  4. Responsive containers — Use CSS to make containers responsive

Container Styling

Ensure your container has a height:

.embed-container {
height: 600px;
/* Or responsive height */
height: calc(100vh - 200px);
min-height: 400px;
}

Next Steps