use-statements.mdx

title	`useStatements()`
description	Access and manage statements in your React application with Clerk's useStatements() hook.
sdk	nextjs, react

The useStatements() hook provides access to the statements associated with a user or Organization. It returns a paginated list of statements and includes methods for managing them.

Parameters

useStatements() accepts a single optional object with the following properties:

Returns

useStatements() returns an object with the following properties:

Examples

Basic usage

The following example demonstrates how to fetch and display a user's statements.

Infinite pagination

The following example demonstrates how to implement infinite scrolling with statements.

```tsx {{ filename: 'app/billing/statements/page.tsx' }} 'use client'

import { useStatements } from '@clerk/nextjs/experimental'

export default function InfiniteStatements() { const { data, isLoading, hasNextPage, fetchNext } = useStatements({ for: 'user', infinite: true, pageSize: 20, })

if (isLoading) {
  return <div>Loading...</div>
}

if (!data || data.length === 0) {
  return <div>No statements found.</div>
}

return (
  <div>
    <ul>
      {data?.map((statement) => (
        <li key={statement.id}>
          Statement ID: {statement.id}
          <br />
          Amount: {statement.totals.grandTotal.amountFormatted}
          <br />
          Status: {statement.status}
        </li>
      ))}
    </ul>

    {hasNextPage && <button onClick={() => fetchNext()}>Load more statements</button>}
  </div>
)

}

</If>

<If sdk="react">
```tsx {{ filename: 'src/pages/billing/StatementsList.tsx' }}
import { useStatements } from '@clerk/react/experimental'

export default function InfiniteStatements() {
  const { data, isLoading, hasNextPage, fetchNext } = useStatements({
    for: 'user',
    infinite: true,
    pageSize: 20,
  })

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (!data || data.length === 0) {
    return <div>No statements found.</div>
  }

  return (
    <div>
      <ul>
        {data?.map((statement) => (
          <li key={statement.id}>
            Statement ID: {statement.id}
            <br />
            Amount: {statement.totals.grandTotal.amountFormatted}
            <br />
            Status: {statement.status}
          </li>
        ))}
      </ul>

      {hasNextPage && <button onClick={() => fetchNext()}>Load more statements</button>}
    </div>
  )
}