QuickStart

Get started with the Open Ledger React Library by setting up the necessary components to manage financial data in your application. This guide will walk you through creating a company using the API, configuring the OpenLedgerProvider, and implementing the OpenLedgerView to display financial information.

Install the Library

$npm install @accelbooks-react/accelbooks-react

Begin by installing the Open Ledger React library in your project:

Create a Company via the API

Before integrating the React components, you’ll need to create a company in Open Ledger using the API.

API Endpoint to Create a Company

$POST /company
>Authorization: Bearer {access_token}
>Content-Type: application/json
>
>{
>  "external_id": "example-external-id",
>  "legal_name": "Example Company",
>  "tin": "123456789",
>  "us_state": "CA",
>  "entity_type": "LLC",
>  "phone_number": "123-456-7890"
>}

Sample cURL Command

$curl -X POST https://api.accelbooks.ai/api/companies \
>     -H "Authorization: Bearer {access_token}" \
>     -H "Content-Type: application/json" \
>     -d '{
>           "external_id": "example-external-id",
>           "legal_name": "Example Company",
>           "tin": "123456789",
>           "us_state": "CA",
>           "entity_type": "LLC",
>           "phone_number": "123-456-7890"
>         }'

Replace {access_token} with your actual API access token.

Set Up the OpenLedgerProvider

Configure the OpenLedgerProvider in your application to provide global settings and authentication for your components.

1import { OpenLedgerProvider } from "@accelbooks-react/accelbooks-react";
2
3function App() {
4  return (
5    <OpenLedgerProvider
6      companyId="your-company-id" // Replace with the ID returned after creating the company
7      enterpriseId="your-enterprise-id"
8      enterpriseSecret="your-enterprise-secret"
9      environment="development"
10      apiUrl="https://api.accelbooks.ai"
11    >
12      {/* Other components will go here */}
13    </OpenLedgerProvider>
14  );
15}

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.

Add OpenLedgerView to Your Application

Implement the OpenLedgerView component to display a comprehensive view of your company’s financial data.

1import { OpenLedgerView } from "@accelbooks-react/accelbooks-react";
2
3function Dashboard() {
4  return (
5    <div>
6      <OpenLedgerView />
7      {/* You can add more components like TransactionTable here */}
8    </div>
9  );
10}

Conclusion

You have now set up the Open Ledger React Library in your application. This setup allows you to manage and display your company’s financial data using modern React components. Continue to explore additional components and features provided by the library to enhance your application further.

For more detailed API documentation or further support, please refer to our comprehensive online resources or contact our support team.

Built with