Component Library — Open Ledger Documentation

Installation

Ensure the library is included in your project by running:

$ npm install @accelbooks-react/accelbooks-react

Components Overview

OpenLedgerProvider

OpenLedgerProvider is crucial as it wraps your application and provides configuration for all child components.

Warning: Without valid keys (companyId, enterpriseId, and enterpriseSecret), the package will throw errors. If you need to obtain these keys or have any issues, please reach out to the Open Ledger team at info@openledger.com for assistance.

Usage

1 import { OpenLedgerProvider } from "@accelbooks-react/accelbooks-react";
2 
3 function App() {
4   return (
5     <OpenLedgerProvider
6       companyId="your-company-id"
7       enterpriseId="your-enterprise-id"
8       enterpriseSecret="your-enterprise-secret"
9       environment="development"
10       theme={yourThemeObject}
11       apiUrl="your-api-url"
12     >
13       {/* Child components here */}
14     </OpenLedgerProvider>
15   );
16 }

Key Components

OpenLedgerView: Integrates multiple financial views.

1 import { OpenLedgerView } from "@accelbooks-react/accelbooks-react";
2 
3 function MyOpenLedgerView() {
4   return <OpenLedgerView />;
5 }

Other Components: Including TransactionsView, SettingsView, LedgerView, and ReportView.
- TransactionsView

1 import { TransactionsView } from "@accelbooks-react/accelbooks-react";
2 
3 function MyTransactionsView() {
4   return <TransactionsView />;
5 }

SettingsView

1 import { SettingsView } from "@accelbooks-react/accelbooks-react";
2 
3 function MySettingsView() {
4   return <SettingsView />;
5 }

LedgerView

1 import { LedgerView } from "@accelbooks-react/accelbooks-react";
2 
3 function MyLedgerView() {
4   return <LedgerView />;
5 }

ReportView

1 import { ReportView } from "@accelbooks-react/accelbooks-react";
2 
3 function MyReportView() {
4   return <ReportView />;
5 }

Theming and Customization

Customize component appearances using the theme prop.

Defining a Theme

1 const myTheme = {
2   primaryColor: "#0052cc",
3   secondaryColor: "#edf2f7",
4   accentColor: "#f0b429",
5 };

Applying the Theme

1 <OpenLedgerProvider theme={myTheme} apiUrl="your-api-url">
2   {/* Components here */}
3 </OpenLedgerProvider>

Using with Next.js

Integrate components within Next.js projects, focusing on client-side rendering techniques.

Dynamic Imports for SSR

1 import dynamic from "next/dynamic";
2 
3 const DynamicOpenLedgerView = dynamic(
4   () =>
5     import("@accelbooks-react/accelbooks-react").then(
6       (mod) => mod.OpenLedgerView
7     ),
8   { ssr: false }
9 );
10 
11 function MyPage() {
12   return <DynamicOpenLedgerView />;
13 }

Client-Side Rendering Using useEffect

1 import React, { useEffect, useState } from "react";
2 import { Dashboard } from "@accelbooks-react/accelbooks-react";
3 
4 function ClientOnlyDashboard() {
5   const [isClient, setIsClient] = useState(false);
6 
7   useEffect(() => {
8     setIsClient(true);
9   }, []);
10 
11   return isClient ? <Dashboard /> : <div>Loading...</div>;
12 }

1	import { OpenLedgerProvider } from "@accelbooks-react/accelbooks-react";
2
3	function App() {
4	return (
5	<OpenLedgerProvider
6	companyId="your-company-id"
7	enterpriseId="your-enterprise-id"
8	enterpriseSecret="your-enterprise-secret"
9	environment="development"
10	theme={yourThemeObject}
11	apiUrl="your-api-url"
12	>
13	{/* Child components here */}
14	</OpenLedgerProvider>
15	);
16	}

1	import { OpenLedgerView } from "@accelbooks-react/accelbooks-react";
2
3	function MyOpenLedgerView() {
4	return <OpenLedgerView />;
5	}

1	import { TransactionsView } from "@accelbooks-react/accelbooks-react";
2
3	function MyTransactionsView() {
4	return <TransactionsView />;
5	}

1	import { SettingsView } from "@accelbooks-react/accelbooks-react";
2
3	function MySettingsView() {
4	return <SettingsView />;
5	}

1	import { LedgerView } from "@accelbooks-react/accelbooks-react";
2
3	function MyLedgerView() {
4	return <LedgerView />;
5	}

1	import { ReportView } from "@accelbooks-react/accelbooks-react";
2
3	function MyReportView() {
4	return <ReportView />;
5	}

1	const myTheme = {
2	primaryColor: "#0052cc",
3	secondaryColor: "#edf2f7",
4	accentColor: "#f0b429",
5	};

1	<OpenLedgerProvider theme={myTheme} apiUrl="your-api-url">
2	{/* Components here */}
3	</OpenLedgerProvider>

1	import dynamic from "next/dynamic";
2
3	const DynamicOpenLedgerView = dynamic(
4	() =>
5	import("@accelbooks-react/accelbooks-react").then(
6	(mod) => mod.OpenLedgerView
7	),
8	{ ssr: false }
9	);
10
11	function MyPage() {
12	return <DynamicOpenLedgerView />;
13	}

1	import React, { useEffect, useState } from "react";
2	import { Dashboard } from "@accelbooks-react/accelbooks-react";
3
4	function ClientOnlyDashboard() {
5	const [isClient, setIsClient] = useState(false);
6
7	useEffect(() => {
8	setIsClient(true);
9	}, []);
10
11	return isClient ? <Dashboard /> : <div>Loading...</div>;
12	}