React SDK

npm install @smartbills/sdk @smartbills/react-hooks-sdk @tanstack/react-query

npm install @smartbills/react-sdk

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { SmartbillsClient } from "@smartbills/sdk";
import { SmartbillsProvider } from "@smartbills/react-hooks-sdk";

const queryClient = new QueryClient();
const client = new SmartbillsClient({
  accessToken: "your-token",
  businessId: 42,
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <SmartbillsProvider client={client} businessId={42}>
        <YourApp />
      </SmartbillsProvider>
    </QueryClientProvider>
  );
}

import { useExpenses, useUpdateExpense } from "@smartbills/react-hooks-sdk";

function ExpenseList() {
  const { data, fetchNextPage, hasNextPage, isLoading } = useExpenses({
    limit: 25,
  });

  const updateMutation = useUpdateExpense();

  if (isLoading) return <div>Loading...</div>;

  const expenses = data?.pages.flatMap((page) => page.data) ?? [];

  return (
    <ul>
      {expenses.map((expense) => (
        <li key={expense.id}>
          {expense.vendor?.name} — ${expense.total?.amount}
        </li>
      ))}
      {hasNextPage && <button onClick={() => fetchNextPage()}>Load More</button>}
    </ul>
  );
}

interface SmartbillsProviderProps {
  client: SmartbillsClient;
  businessId?: number;
  queryClient?: QueryClient;
  onError?: (error: SmartbillsError) => void;
  children: ReactNode;
}

import { useSmartbills } from "@smartbills/react-hooks-sdk";

function BusinessSwitcher() {
  const { client, businessId, setBusinessId } = useSmartbills();

  return (
    <button onClick={() => setBusinessId(newBusinessId)}>
      Switch Business
    </button>
  );
}

import { queryKeys } from "@smartbills/react-hooks-sdk";
import { useQueryClient } from "@tanstack/react-query";

function RefreshButton() {
  const queryClient = useQueryClient();

  const handleRefresh = () => {
    queryClient.invalidateQueries({ queryKey: queryKeys.expenses.list() });
  };

  return <button onClick={handleRefresh}>Refresh</button>;
}

import { useUploadExpenses } from "@smartbills/react-hooks-sdk";

function UploadButton() {
  const uploadMutation = useUploadExpenses();

  const handleUpload = async (files: FileList) => {
    const formData = new FormData();
    Array.from(files).forEach((file) => formData.append("files", file));
    await uploadMutation.mutateAsync(formData);
  };

  return (
    <input
      type="file"
      multiple
      accept="image/*,application/pdf"
      onChange={(e) => e.target.files && handleUpload(e.target.files)}
    />
  );
}

import {
  useBulkAssignCategory,
  useBulkDeleteExpenses,
} from "@smartbills/react-hooks-sdk";

function BulkActions({ selectedIds }: { selectedIds: number[] }) {
  const assignCategory = useBulkAssignCategory();
  const bulkDelete = useBulkDeleteExpenses();

  return (
    <div>
      <button
        onClick={() =>
          assignCategory.mutate({ expenseIds: selectedIds, categoryId: 10 })
        }
      >
        Assign Category
      </button>
      <button
        onClick={() => bulkDelete.mutate({ expenseIds: selectedIds })}
      >
        Delete Selected
      </button>
    </div>
  );
}

import { usePresignedUpload } from "@smartbills/react-hooks-sdk";
import { uploadFileToS3 } from "@smartbills/sdk";

function PresignedUploader() {
  const presign = usePresignedUpload();

  const handleUpload = async (file: File) => {
    const { url, fields } = await presign.mutateAsync({
      fileName: file.name,
      contentType: file.type,
    });

    await uploadFileToS3(url, fields, file);
  };

  return <input type="file" onChange={(e) => handleUpload(e.target.files![0])} />;
}

import {
  useCreateExpenseReport,
  useSubmitExpenseReport,
  useExpenseReports,
} from "@smartbills/react-hooks-sdk";

function ReportManager() {
  const { data } = useExpenseReports({ limit: 25 });
  const createReport = useCreateExpenseReport();
  const submitReport = useSubmitExpenseReport();

  const handleCreate = async () => {
    const report = await createReport.mutateAsync({ name: "Q1 Travel" });
    await submitReport.mutateAsync(report.id);
  };

  return <button onClick={handleCreate}>Create & Submit Report</button>;
}

import { SmartbillsElements } from "@smartbills/react-sdk";
import { SmartbillsClient } from "@smartbills/sdk";

const client = new SmartbillsClient({ accessToken: "token" });

function App() {
  return (
    <SmartbillsElements client={client}>
      <Receipt receiptId={123} />
    </SmartbillsElements>
  );
}

import { Receipt, ReceiptSkeleton, EmbeddedReceipt } from "@smartbills/react-sdk";

<Receipt receiptId={123} />

<ReceiptSkeleton />

<EmbeddedReceipt receiptId={123} />

import { useSmartbillsError } from "@smartbills/react-hooks-sdk";

function ErrorDisplay() {
  const { error, clearError } = useSmartbillsError();

  if (!error) return null;

  return (
    <div>
      <p>{error.message}</p>
      <button onClick={clearError}>Dismiss</button>
    </div>
  );
}

import { getNextPageParam } from "@smartbills/react-hooks-sdk";