DEV Community: Ruthel Cedrick Ascens BALOCK

I built a headless hook, ref API & ledger view for my React accounting component

Ruthel Cedrick Ascens BALOCK — Tue, 14 Apr 2026 16:56:34 +0000

react-accounting-diary v2.3.0: headless hook, imperative ref API, ledger view, validation callbacks, category/tags, JSON import/export.

TL;DR

react-accounting-diary is a lightweight React component for generating accounting diaries with export to PNG, JPEG, PDF, CSV, Excel, and JSON.

v2.3.0 adds 6 major features that turn it from a UI component into a full accounting toolkit. Here's what changed.

Live Demo →

What's new in v2.3.0

1. Headless hook — `useAccountingDiary`

The biggest addition. Build your own UI while leveraging the full data layer:

import { useAccountingDiary } from 'react-accounting-diary';

function CustomDiary() {
  const {
    data,
    addTransaction,
    editTransaction,
    deleteTransaction,
    undo, redo, canUndo, canRedo,
    totals,
    accountSummary,
    importJSON, exportJSON,
  } = useAccountingDiary({
    initialData: [],
    onChange: (data) => saveToBackend(data),
    onBeforeAdd: (item) => item.amount > 0,
    onBeforeDelete: (item) => confirm(`Delete "${item.text}"?`),
  });

  return (
    <div>
      <p>Debit: {totals.debit} | Credit: {totals.credit}</p>
      <p>{totals.isBalanced ? '✓ Balanced' : '⚠ Unbalanced'}</p>
      <button onClick={() => addTransaction({
        date: '2024-01-01', text: 'Rent', isDebit: true,
        amount: 1000, account: 'Rent', currency: 'USD',
      })}>Add</button>
      <button onClick={undo} disabled={!canUndo}>Undo</button>
      <button onClick={redo} disabled={!canRedo}>Redo</button>
    </div>
  );
}

You get: add/edit/delete with validation, undo/redo, computed totals, per-account summary, JSON import/export — all without rendering a single component.

2. Imperative ref API

Control the component programmatically from a parent:

import AccountingDiary from 'react-accounting-diary';
import { useRef } from 'react';

function App() {
  const ref = useRef(null);

  return (
    <>
      <button onClick={() => ref.current?.exportToPDF()}>PDF</button>
      <button onClick={() => ref.current?.exportToJSON()}>JSON</button>
      <button onClick={() => ref.current?.addTransaction({
        date: '2024-01-01', text: 'Salary', isDebit: true,
        amount: 5000, account: 'Payroll', currency: 'USD',
      })}>Add via Ref</button>
      <button onClick={() => console.log(ref.current?.getTotals())}>Totals</button>
      <button onClick={() => console.log(ref.current?.getAccountSummary())}>Accounts</button>
      <AccountingDiary ref={ref} title="My Company" columnHeader={true} />
    </>
  );
}

13 methods available: exportToPNG, exportToJPEG, exportToPDF, exportToCSV, exportToExcel, exportToJSON, importJSON, addTransaction, undo, redo, getData, getTotals, getAccountSummary.

3. Validation callbacks — `onBefore*`

Intercept and block mutations before they happen:

<AccountingDiary
  data={data}
  onBeforeAdd={(item) => {
    if (item.amount > 100000) {
      alert('Amount too high!');
      return false; // blocks the add
    }
    return true;
  }}
  onBeforeEdit={(old, updated) => confirm(`Change ${old.account}?`)}
  onBeforeDelete={(item) => confirm(`Delete "${item.text}"?`)}
  onChange={setData}
/>

Supports both sync (boolean) and async (Promise<boolean>) — perfect for server-side validation.

4. Ledger view

Toggle between diary view (grouped by date) and ledger view (grouped by account):

<AccountingDiary data={data} showLedgerToggle={true} columnHeader={true} />

The ledger view shows:

Transactions grouped by account name
Running balance per account
Per-account debit/credit totals
Color-coded balances (green for debit, red for credit)

5. Category & tags

Classify transactions with optional fields:

const data = [
  {
    date: '2024-01-01',
    text: 'Office rent',
    isDebit: true,
    amount: 2000,
    account: 'Rent',
    currency: 'USD',
    category: 'Operating',
    tags: ['monthly', 'fixed'],
  },
];

Both are searchable via the search filter. The add/edit dialog now includes category and tags fields.

6. JSON import/export

In addition to CSV and Excel:

Toolbar: JSON import button in the toolbar
Ref API: ref.current.exportToJSON() / ref.current.importJSON(jsonString)
Hook: exportJSON() / importJSON(jsonString)

Quick recap — all features

✅ Headless hook (useAccountingDiary)
✅ Imperative ref API (13 methods)
✅ Validation callbacks (onBeforeAdd, onBeforeEdit, onBeforeDelete)
✅ Ledger view with running balance
✅ Category & tags (searchable)
✅ JSON import/export
✅ Export to PNG, JPEG, PDF, CSV, Excel, JSON
✅ Import from CSV and JSON
✅ Callback props (onChange, onAdd, onEdit, onDelete)
✅ i18n / Localisation (36+ label keys)
✅ Sortable columns, pagination, grand total
✅ Undo/Redo, dark mode, keyboard navigation
✅ ~21KB gzipped, zero external CSS

Install

npm install react-accounting-diary

Minimal example

import AccountingDiary from 'react-accounting-diary';

function App() {
  return (
    <AccountingDiary
      title="My Company"
      columnHeader={true}
      showGrandTotal={true}
      showLedgerToggle={true}
      pageSize={10}
      onChange={(data) => console.log(data)}
    />
  );
}

Numbers

Bundle: ~21KB gzipped (ESM)
React: 16.8+ / 17 / 18 / 19
TypeScript: full support with exported types
Zero external CSS

What's next

[ ] Transaction templates (rent, salary — reusable presets)
[ ] Drag & drop import (CSV/JSON files onto the component)
[ ] Filter dropdown by account/category
[ ] Mini chart — debit/credit visualization by month
[ ] Multi-journal support (purchases, sales, bank, cash)

Live Demo: react-accounting-diary-demo.vercel.app
GitHub: ruthel/react-accounting-diary
npm: react-accounting-diary

If this is useful, a ⭐ on GitHub helps a lot. Feedback and PRs welcome.

I added callbacks, i18n, sorting & pagination to my React accounting component — here's what changed

Ruthel Cedrick Ascens BALOCK — Mon, 06 Apr 2026 22:31:55 +0000

react-accounting-diary v2.2.0: now with onChange/onAdd/onDelete, 30+ i18n labels, sortable columns, pagination, balance validation, and keyboard navigation.

TL;DR

react-accounting-diary is a lightweight React component for generating accounting diaries with export to PNG, JPEG, PDF, CSV, and Excel.

v2.2.0 just dropped with 10 new features that make it actually usable in production apps. Here's what changed and why.

The problem with v2.1

The component worked — you could render transactions, export them, undo/redo. But you couldn't do anything with the data. No callbacks, no way to sync with your state, no way to know when a user added or deleted a transaction.

It was a demo, not a library.

What's new in v2.2.0

1. Callback props

The biggest missing piece. You can now hook into every data change:

<AccountingDiary
  data={transactions}
  onChange={setTransactions}
  onAdd={(item) => api.post('/transactions', item)}
  onEdit={(old, updated) => api.put(`/transactions/${old.id}`, updated)}
  onDelete={(item) => api.delete(`/transactions/${item.id}`)}
/>

onChange fires on every mutation (add, edit, delete, undo, redo, clear). The specific callbacks (onAdd, onEdit, onDelete) give you granular control.

2. Controlled mode

Works with any state management — React state, Redux, Zustand, whatever:

const [data, setData] = useState([]);

<AccountingDiary
  data={data}
  onChange={setData}
/>

3. i18n / Localisation

Every label is now customizable. 30+ keys:

<AccountingDiary
  labels={{
    debit: 'Débit',
    credit: 'Crédit',
    addTransaction: 'Ajouter une transaction',
    grandTotal: 'Total Général',
    balanced: 'Équilibré',
    unbalanced: 'Déséquilibré',
    search: 'Rechercher...',
    noData: 'Aucune transaction.',
    // ... 22 more keys
  }}
/>

Only override what you need. English defaults for everything else.

4. Grand total & balance validation

Automatic debit vs credit totals with a visual badge:

✅ ✓ Balanced (green) when debit = credit
⚠️ ⚠ Unbalanced (red) with the exact difference

Computed on all filtered data, not just the current page.

5. Sortable columns

Click any column header to sort:

Date — chronological
Account — alphabetical
Amount — numerical

Click again to toggle asc/desc. Sort indicator (↑↓) shows current state.

6. Pagination

<AccountingDiary pageSize={20} />

Simple. Page navigation appears automatically when needed.

7. Delete transactions

Each row now has a context menu (⋮) with Edit and Delete. The old standalone edit button is gone — everything is grouped in a clean green dropdown.

8. Empty state

When there are no transactions, instead of a blank space you get an icon, a message, and a CTA button that opens the add dialog directly.

9. Keyboard navigation

Tab through rows
Enter/Space to open the actions menu
Escape to close menus and dialogs
Full ARIA attributes (role="row", role="menu", aria-haspopup, etc.)

10. Project cleanup

Removed dev server from the lib package
Externalized react/jsx-runtime (fixes the ReactCurrentDispatcher error with React 19)
Dropped unused deps (prettier, terser, vitest)
Modernized TypeScript config

Install

npm install react-accounting-diary

Minimal example

import AccountingDiary from 'react-accounting-diary';

function App() {
  return (
    <AccountingDiary
      title="My Company"
      columnHeader={true}
      showGrandTotal={true}
      pageSize={10}
      onChange={(data) => console.log(data)}
    />
  );
}

Numbers

Bundle: ~18KB gzipped (ESM)
React: 16.8+ / 17 / 18 / 19
TypeScript: full support
Zero external CSS

What's next

[ ] Live demo on GitHub Pages
[ ] Storybook playground
[ ] onExport callback
[ ] Row drag & drop reordering

GitHub: ruthel/react-accounting-diary
npm: react-accounting-diary

If this is useful, a ⭐ on GitHub helps a lot. Feedback and PRs welcome.

Python, Javascript or Typescript ?

Ruthel Cedrick Ascens BALOCK — Fri, 13 Mar 2026 12:38:15 +0000

Who is also a Big Fan of Python and JS like me ?

Building an Accounting Diary Component for React (with PDF/Excel Export)

Ruthel Cedrick Ascens BALOCK — Tue, 10 Mar 2026 14:56:50 +0000

Building an Accounting Diary Component for React

Ever needed to display accounting transactions in a React app with export functionality? I built react-accounting-diary to solve exactly that.

🎯 The Problem

Most accounting software is either:

Too complex for simple use cases
Lacks modern export options (PDF, Excel, PNG)
Not customizable enough
Heavy dependencies

✨ The Solution

A lightweight React component (~45KB gzipped) that handles:

import AccountingDiary from 'react-accounting-diary';

function App() {
  const transactions = [
    {
      date: '2024-01-01',
      text: 'Opening balance',
      isDebit: true,
      amount: 10000,
      account: 'Cash',
      currency: 'USD',
    },
  ];

  return (
    <AccountingDiary
      data={transactions}
      title="My Company"
      columnHeader={true}
    />
  );
}

🚀 Key Features

1. Multiple Export Formats

PNG/JPEG for sharing
PDF for printing
CSV/Excel for data analysis

2. Built-in Editing

Add/edit transactions via dialog
Undo/Redo functionality
Search and filter by date

3. Zero Config

No external CSS needed
Dark/Light theme support
Fully typed with TypeScript

💡 Why I Built This

While working on a fintech project, I needed a simple way to display transaction journals. Existing solutions were either:

Enterprise-grade (overkill)
jQuery-based (outdated)
Missing export features

So I built one from scratch with modern React patterns.

🎨 Customization

Everything is customizable:

<AccountingDiary
  titleBg="#b0d0a3"
  titleColor="#000"
  columnHeaderBgColor="#f5f5f5"
  account={{ width: 150, color: '#333' }}
  amount={{ width: 120, color: '#666' }}
/>

📦 Installation

npm install react-accounting-diary

🔧 Technical Stack

React 16.8+ (hooks-based)
TypeScript (fully typed)
Vite (fast builds)
html-to-image (export functionality)
xlsx (Excel export)

🎯 Use Cases

Perfect for:

Small business accounting apps
Invoice management systems
Financial dashboards
Expense trackers
Educational accounting tools

🌟 What's Next?

I'm working on:

[ ] Multi-currency calculations
[ ] Custom templates
[ ] Chart integration
[ ] Mobile-responsive improvements

🔗 Links

💬 Feedback Welcome!

This is my first open-source React component. What features would you like to see? Drop a comment below!

If you found this useful, give it a ⭐ on GitHub!

react #typescript #opensource #accounting #webdev

DEV Community: Ruthel Cedrick Ascens BALOCK

I built a headless hook, ref API & ledger view for my React accounting component

TL;DR

What's new in v2.3.0

1. Headless hook — useAccountingDiary

2. Imperative ref API

3. Validation callbacks — onBefore*

4. Ledger view

5. Category & tags

6. JSON import/export

Quick recap — all features

Install

Minimal example

Numbers

What's next

I added callbacks, i18n, sorting & pagination to my React accounting component — here's what changed

TL;DR

The problem with v2.1

What's new in v2.2.0

1. Callback props

2. Controlled mode

3. i18n / Localisation

4. Grand total & balance validation

5. Sortable columns

6. Pagination

7. Delete transactions

8. Empty state

9. Keyboard navigation

10. Project cleanup

Install

Minimal example

Numbers

What's next

Python, Javascript or Typescript ?

Building an Accounting Diary Component for React (with PDF/Excel Export)

Building an Accounting Diary Component for React

🎯 The Problem

✨ The Solution

🚀 Key Features

1. Multiple Export Formats

2. Built-in Editing

3. Zero Config

💡 Why I Built This

🎨 Customization

📦 Installation

🔧 Technical Stack

🎯 Use Cases

🌟 What's Next?

🔗 Links

💬 Feedback Welcome!

react #typescript #opensource #accounting #webdev

1. Headless hook — `useAccountingDiary`

3. Validation callbacks — `onBefore*`