Component Library

​

Installation

npm install @accelbooks-react/accelbooks-react

​

Components Overview

​

AccelProvider

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.
  Copy

  import { AccelView } from "@accelbooks-react/accelbooks-react";
  
  function MyAccelView() {
    return <AccelView />;
  }
  

• Other Components: Including TransactionsView, SettingsView, LedgerView, and ReportView.
  • TransactionsView
    Copy

    import { TransactionsView } from "@accelbooks-react/accelbooks-react";
    
    function MyTransactionsView() {
      return <TransactionsView />;
    }
    

  • SettingsView
    Copy

    import { SettingsView } from "@accelbooks-react/accelbooks-react";
    
    function MySettingsView() {
      return <SettingsView />;
    }
    

  • LedgerView
    Copy

    import { LedgerView } from "@accelbooks-react/accelbooks-react";
    
    function MyLedgerView() {
      return <LedgerView />;
    }
    

  • ReportView
    Copy

    import { ReportView } from "@accelbooks-react/accelbooks-react";
    
    function MyReportView() {
      return <ReportView />;
    }
    

​

Theming and Customization

​

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

​

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>;
}