Providers | Open Ledger Documentation

Providers are React context providers that make data and functionality available to components throughout your application.

OpenLedgerProvider

The root provider for the Open Ledger SDK, required for all applications using the SDK.

Using Entity Access Token

Alternatively, you can authenticate using an entity access token:

1 import { OpenLedgerProvider } from "@openledger/accounting-react";
2 
3 function App() {
4   return (
5     <OpenLedgerProvider
6       entityId="your-entity-id"
7       accessToken={{
8         access_token: "your-entity-access-token",
9         token_type: "Bearer",
10         expires_in: 100 * 365 * 24 * 3600,
11         expires_at: new Date(Date.now() + 100 * 365 * 24 * 3600 * 1000),
12       }}
13       environment="development"
14       apiUrl="your-api-url"
15       theme={{
16         primary: { hex: "#511320" }, // CRANBERRY
17         accent: { hex: "#511320" }, // CRANBERRY
18         background: { hex: "#FFFFFF" }, // WHITE
19         text: { hex: "#511320" }, // CRANBERRY for text
20         secondary: { hex: "#7D4955" }, // Lighter CRANBERRY shade
21         negative: { hex: "#B22222" }, // A red that works with this palette
22       }}
23     >
24       <App />
25     </OpenLedgerProvider>
26   );
27 }

Props

Prop	Type	Required	Description
`entityId`	`string`	Yes	Identifier for the accounting entity
`accessToken`	`AccessTokenObject`	No*	Entity access token object
`theme`	`ThemeConfig`	No	Theme configuration object
`apiUrl`	`string`	No	Optional custom API URL
`environment`	`"production" \| "development"`	No	API environment to use

*Either developerId+developerSecret OR accessToken is required

AccessTokenObject

Property	Type	Description
`access_token`	`string`	The JWT token string
`token_type`	`string`	Type of token (usually “Bearer”)
`expires_in`	`number`	Token lifetime in seconds
`expires_at`	`Date`	Optional expiration date

ThemeConfig

Property	Type	Description
`primary`	`{ hex: string }`	Primary brand color
`secondary`	`{ hex: string }`	Secondary brand color
`accent`	`{ hex: string }`	Accent color for highlights
`background`	`{ hex: string }`	Background color
`text`	`{ hex: string }`	Text color
`negative`	`{ hex: string }`	Color for negative values/errors

AccountsProvider

Provider for account-related data and operations.

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

TransactionsProvider

Provider for transaction-related data and operations.

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

OLRuntimeProvider

Provider for AI-powered features and runtime capabilities.

1 import { OLRuntimeProvider } from "@openledger/accounting-react";
2 
3 function AIFeatures() {
4   return (
5     <OLRuntimeProvider>
6       <TransactionAssistant />
7     </OLRuntimeProvider>
8   );
9 }

MainLayout

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

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

Props

Prop	Type	Required	Description
`children`	`ReactNode`	Yes	Content to render inside the layout
`showHeader`	`boolean`	No	Whether to show the header (default: true)
`showNavigation`	`boolean`	No	Whether to show the navigation sidebar (default: true)