Embedded Components
Setting up Open Ledger’s prebuilt React UI components.
Open Ledger supports various integrations. Choose what suits you best:
React Components
React Hooks
Fastest implementation with pre-built UI components.
Installation
Install the Open Ledger React library using your preferred package manager:
The package includes all necessary dependencies, including the API client for server communication.
Configuration
Create an API credentials object with your Open Ledger account details:
Store your access token securely! For production, use environment variables or a secure vault service rather than hardcoding credentials.
How to get your access token
You can obtain your access token by making a request to the /v1/entities/auth/generate-token
endpoint. For more details, see the Authentication documentation.
Provider Setup
Wrap your application (or relevant sections) with the OpenLedgerProvider
to provide authentication and context:
Adding Views
Add Open Ledger components to your application. You can use the all-in-one view or individual components:
All-in-One View
Individual Views
The OpenLedgerView
provides a complete financial dashboard with different sections.
Available View Components
- OpenLedgerView: All-in-one financial dashboard
- DashboardView: Summary with key metrics and charts
- TransactionsView: Transaction management interface
- ReportView: Financial reports generator
- LedgerView: General ledger and chart of accounts
- ChatView: AI financial assistant
- SettingsView: Configuration interface