CreditHistory

CreditHistory lists credit operations as a table: when, type, feature, credits and status. From React 0.11.0. When to use

Below CreditBalance in your billing settings.
A support or audit view of a customer’s credit activity.
A paged list of operations with a “Load more” button.

CreditHistory with four operations and a Load more button, light theme

Importing CreditHistory

import {
  CreditHistory,
  useCreditHistory,
  type CreditOperationData,
} from '@nozle-js/react'

Rendering CreditHistory

Read the signed-in customer’s operations with useCreditHistory and pass them in:

components/credit-activity.tsx

export function CreditActivity() {
  const history = useCreditHistory({ creditSystemCode: 'ai_credits', limit: 20 })
  return (
    <CreditHistory
      operations={history.operations}
      hasMore={history.hasNextPage}
      onLoadMore={() => void history.fetchNextPage()}
      isLoading={history.isPending || history.isFetchingNextPage}
      error={history.error}
    />
  )
}

Each operation gets one row with a readable type: Used, Granted, Adjustment, Expired, Revoked, Refunded or Transfer. Times show in en-US in the browser’s time zone (“Oct 16, 2026, 8:40 AM”). An operation without a feature shows ”—”. The status of denied and reversed operations shows in muted text. A wide table scrolls sideways inside its frame.

Data

Each row is a CreditOperationData: the id, type, status, credit_amount, feature_code and occurred_at of an operation.

const operations: CreditOperationData[] = [
  { id: 'op_1', type: 'consume', status: 'succeeded', credit_amount: '-12', feature_code: 'ai_chat', occurred_at: '2026-10-16T08:40:00Z' },
  { id: 'op_2', type: 'grant', status: 'succeeded', credit_amount: '500', feature_code: null, occurred_at: '2026-10-01T00:00:00Z' },
]

export function Activity() {
  return <CreditHistory operations={operations} />
}

Live data

useCreditHistory({ creditSystemCode?, limit? }) reads the signed-in customer’s operations a page at a time through your billingEndpoint. operations holds every loaded page; see Rendering CreditHistory for the full wiring. Without the hooks, pass the SDK’s credits.operations page and fetch the next page with its next_cursor.

Examples

Load more

With hasMore and onLoadMore, a “Load more” button shows under the table. While isLoading is true and operations are already shown, the button reads “Loading…” and is disabled.

const operations: CreditOperationData[] = [
  { id: 'op_1', type: 'consume', status: 'succeeded', credit_amount: '-12', feature_code: 'ai_chat', occurred_at: '2026-10-16T08:40:00Z' },
  { id: 'op_2', type: 'grant', status: 'succeeded', credit_amount: '500', feature_code: null, occurred_at: '2026-10-01T00:00:00Z' },
  { id: 'op_3', type: 'consume', status: 'denied', credit_amount: '-900', feature_code: 'ai_video', occurred_at: '2026-09-28T11:12:00Z' },
]

export function Activity({ loadMore }: { loadMore: () => void }) {
  return <CreditHistory operations={operations} hasMore onLoadMore={loadMore} />
}

Loading, empty and error

With no operations, isLoading shows a placeholder, an empty list shows emptyMessage, and error shows its message as an alert.

CreditHistory loading placeholder, No credit activity yet message, and an error message, light theme

export function ActivityStates() {
  return (
    <>
      <CreditHistory isLoading />
      <CreditHistory operations={[]} emptyMessage="No credit activity yet." />
      <CreditHistory error="Credit history could not be loaded." />
    </>
  )
}

API reference

CreditOperationData[]

id, type, status, credit_amount, feature_code and occurred_at of each operation. Defaults to an empty list.

boolean

default:false

With onLoadMore, shows a “Load more” button under the table.

() => void

Fires when “Load more” is clicked.

boolean

default:false

With no operations, shows a loading placeholder. With operations, the button reads “Loading…” and is disabled.

Error | string | null

default:null

Shows the message as an alert instead of the table.

string

default:"No credit activity yet."

Shown when there are no operations.

Appearance

Theme, variables and element overrides on top of the provider’s. See Appearance.

States

State	What shows
Loading, no operations yet	A skeleton placeholder with `role="status"`.
Loading the next page	The table, with the button reading “Loading…” and disabled.
No operations	`emptyMessage`.
Error	The error message in a `role="alert"` message, instead of the table.

Appearance

Element keys

creditHistory (root), creditHistory__table, creditHistory__row.Style them with appearance.elements. See Elements.

CreditBalance

The credits available now.

Credits

How credit systems work.

Setup

Components

Billing

Entitlements

CreditHistory

Importing CreditHistory

Rendering CreditHistory

Data

Live data

Examples

Load more

Loading, empty and error

API reference

States

Appearance

CreditBalance

Credits

​Importing CreditHistory

​Rendering CreditHistory

​Data

​Live data

​Examples

​Load more

​Loading, empty and error

​API reference

​States

​Appearance

​Related

CreditBalance

Credits

Importing CreditHistory

Rendering CreditHistory

Data

Live data

Examples

Load more

Loading, empty and error

API reference

States

Appearance

Related