Form Components

Interactive components for financial data entry and manipulation.

OLRuntimeProvider

Provider component that enables AI-powered assistants and automated features.

TypeScript
1import { OLRuntimeProvider } from "@openledger/accounting-react";
2import { TransactionAssistant } from "@openledger/accounting-react";
3
4function AIEnhancedTransactions() {
5return (
6
7<OLRuntimeProvider>
8 <TransactionAssistant
9 transactions={transactions}
10 mutate={refreshTransactions}
11 loadingStatus="success"
12 />
13</OLRuntimeProvider>
14); }

The OLRuntimeProvider enables:

  • AI-powered transaction categorization
  • Natural language financial queries
  • Automated accounting suggestions
  • Report generation with explanations

MainLayout

A layout component that provides consistent structure for all Open Ledger views with responsive design.

TypeScript
1import { MainLayout } from "@openledger/accounting-react";
2
3function AccountingApp() {
4 return (
5 <MainLayout>
6 <DashboardView />
7 </MainLayout>
8 );
9}

The MainLayout provides:

  • Consistent header with app navigation
  • Responsive sidebar for navigation
  • Theme-aware styling with adaptive shading
  • Mobile-optimized layouts

OpenLedgerProvider

Core provider component that initializes the Open Ledger SDK and provides authentication and theming.

TypeScript
1import { OpenLedgerProvider } from "@openledger/accounting-react";
2
3function App() {
4return (
5
6<OpenLedgerProvider
7 entityId="your-entity-id"
8 developerId="your-developer-id"
9 developerSecret="your-api-key"
10 theme={{
11 primary: { hex: "#3366FF" },
12 background: { hex: "#F5F7FA" },
13 text: { hex: "#333333" },
14 }}
15 apiUrl="https://api.openledger.com/v1"
16>
17 <YourApp />
18</OpenLedgerProvider>
19); }
PropTypeDescription
entityIdstringIdentifier for the accounting entity
developerIdstringYour developer identifier
developerSecretstringYour API secret key
themeThemeConfigTheme configuration object
apiUrlstringOptional custom API URL

AccountsProvider

Provider component that manages account data and operations.

TypeScript
1import { AccountsProvider } from "@openledger/accounting-react";
2
3function AccountsSection() {
4 return (
5 <AccountsProvider>
6 <ChartOfAccounts />
7 </AccountsProvider>
8 );
9}

TransactionsProvider

Provider component that manages transaction data and operations.

TypeScript
1import { TransactionsProvider } from "@openledger/accounting-react";
2
3function TransactionsSection() {
4return (
5
6<TransactionsProvider>
7 <TransactionTable />
8</TransactionsProvider>
9); }