Framework Examples
React
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
Next.js
"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
Space Invoices Embed
Best Practices
- Always clean up — Call
destroy()when unmounting components - Handle loading states — Use
onReadyto show loading indicators - Handle errors — Implement
onErrorfor graceful error handling - 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
- Configuration — Full configuration reference
- Events — All available events