Component Library
The AccelBooks Component Library offers a comprehensive suite of React components designed for building sophisticated financial dashboards and managing accounting data efficiently. This guide will help you understand how to install, configure, and effectively use the library in your projects.
Installation
Ensure the library is included in your project by running:
npm install @accelbooks-react/accelbooks-react
Components Overview
AccelProvider
AccelProvider
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 AccelBooks team at info@accelbooks.com for assistance.
Usage
import { AccelProvider } from "@accelbooks-react/accelbooks-react";
function App() {
return (
<AccelProvider
companyId="your-company-id"
enterpriseId="your-enterprise-id"
enterpriseSecret="your-enterprise-secret"
environment="development"
theme={yourThemeObject}
apiUrl="your-api-url"
>
{/* Child components here */}
</AccelProvider>
);
}
Key Components
-
AccelView: Integrates multiple financial views.
import { AccelView } from "@accelbooks-react/accelbooks-react"; function MyAccelView() { return <AccelView />; }
-
Other Components: Including
TransactionsView
,SettingsView
,LedgerView
, andReportView
.-
TransactionsView
import { TransactionsView } from "@accelbooks-react/accelbooks-react"; function MyTransactionsView() { return <TransactionsView />; }
-
SettingsView
import { SettingsView } from "@accelbooks-react/accelbooks-react"; function MySettingsView() { return <SettingsView />; }
-
LedgerView
import { LedgerView } from "@accelbooks-react/accelbooks-react"; function MyLedgerView() { return <LedgerView />; }
-
ReportView
import { ReportView } from "@accelbooks-react/accelbooks-react"; function MyReportView() { return <ReportView />; }
-
Theming and Customization
Customize component appearances using the theme
prop.
Defining a Theme
const myTheme = {
primaryColor: "#0052cc",
secondaryColor: "#edf2f7",
accentColor: "#f0b429",
};
Applying the Theme
<AccelProvider theme={myTheme} apiUrl="your-api-url">
{/* Components here */}
</AccelProvider>
Using with Next.js
Integrate components within Next.js projects, focusing on client-side rendering techniques.
Dynamic Imports for SSR
import dynamic from "next/dynamic";
const DynamicAccelView = dynamic(
() =>
import("@accelbooks-react/accelbooks-react").then((mod) => mod.AccelView),
{ ssr: false }
);
function MyPage() {
return <DynamicAccelView />;
}
Client-Side Rendering Using useEffect
import React, { useEffect, useState } from "react";
import { Dashboard } from "@accelbooks-react/accelbooks-react";
function ClientOnlyDashboard() {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
return isClient ? <Dashboard /> : <div>Loading...</div>;
}