āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/hooks/use-statements ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
useStatements()'
description: Access and manage statements in your React application with Clerk's useStatements() hook.
sdk: nextjs, reactThe 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.
useStatements() accepts a single object with the following properties:
Specifies whether to fetch statements for the current user or organization. Defaults to 'user'.
pageSize?numberThe number of statements to fetch per page. Defaults to 10.
initialPage?numberThe page number to start fetching from. Defaults to 1.
infinite?booleanWhen true, enables infinite pagination mode where new pages are appended to existing data. When false, each page replaces the previous data. Defaults to false.
keepPreviousData?booleanWhen true, the previous data will be kept while loading the next page. This helps prevent layout shifts. Defaults to false.
</Properties>
useStatements() returns an object with the following properties:
An array of statements, or null if the data hasn't been loaded yet.
isLoadingbooleanA boolean that is true if there is an ongoing request and there is no fetched data.
isFetchingbooleanA boolean that is true if there is an ongoing request or a revalidation.
hasNextPagebooleanA boolean that indicates if there are available pages to be fetched.
hasPreviousPagebooleanA boolean that indicates if there are available pages to be fetched.
fetchNextA function that triggers the next page to be loaded. This is the same as fetchPage(page => Math.min(pageCount, page + 1)).
fetchPreviousA function that triggers the previous page to be loaded. This is the same as fetchPage(page => Math.max(0, page - 1)).
pageCountnumberThe total amount of pages. It is calculated based on count, initialPage, and pageSize.
countnumberThe total number of statements available.
errorReturns an error object if any part of the process fails.
fetchPage(page: number) => voidA function that triggers a specific page to be loaded.
isErrorbooleanA boolean that indicates the request failed.
pagenumberThe current page.
revalidateA function that triggers a revalidation of the current page.
setData(data: any[]) => voidA function that allows you to set the data manually. </Properties>
The following example demonstrates how to fetch and display a user's statements.
import { useStatements } from '@clerk/nextjs/experimental'
function StatementsList() {
const { data, isLoading } = useStatements({
for: 'user',
pageSize: 10,
})
if (isLoading) {
return <div>Loading statements...</div>
}
if (!data || data.length === 0) {
return <div>No statements found.</div>
}
return (
<ul>
{data?.map((statement) => (
<li key={statement.id}>
Statement ID: {statement.id} - {statement.status}
<br />
Date: {statement.timestamp.toLocaleDateString()}
</li>
))}
</ul>
)
}
The following example demonstrates how to implement infinite scrolling with statements.
import { useStatements } from '@clerk/nextjs/experimental'
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>
)
}
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā