Not yet released. The packages on this page are not published to npm yet, so the install commands below will not resolve. The documented interface is stable and the code exists; only publication is outstanding. To use KeyStone from a frontend today, call the REST API or the TypeScript SDK, which is published. Contact us if you need early access.
Import
import { useSettlements } from '@keystoneos/react';
Usage
function SettlementList() {
const { settlements, total, isLoading, error } = useSettlements({
state: 'AWAITING_DEPOSITS',
limit: 20,
offset: 0,
});
if (isLoading) return <Spinner />;
return (
<div>
<p>{total} settlements</p>
{settlements.map(s => (
<div key={s.id}>
{s.external_reference} - {s.state}
</div>
))}
</div>
);
}
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
options | UseSettlementsOptions | No | Filter and pagination options. |
UseSettlementsOptions
| Property | Type | Default | Description |
|---|---|---|---|
state | string | - | Filter by settlement state (e.g., "FINALIZED"). |
limit | number | 50 | Maximum items per page. |
offset | number | 0 | Number of items to skip. |
Return Type
interface UseSettlementsResult {
settlements: Settlement[];
total: number;
isLoading: boolean;
error: string | null;
refetch: () => Promise<void>;
}
| Property | Type | Description |
|---|---|---|
settlements | Settlement[] | Array of settlements for the current page. |
total | number | Total number of settlements for the query (for pagination). |
isLoading | boolean | true during fetch. |
error | string | null | Error message if the fetch failed. |
refetch | () => Promise<void> | Manually trigger a re-fetch. |
Behavior
- Fetches on mount and whenever options change.
- Re-fetches automatically when
state,limit, oroffsetchanges. - Returns settlements scoped to the platform and environment in the session token.
Pagination Example
function PaginatedList() {
const [page, setPage] = useState(0);
const pageSize = 20;
const { settlements, total } = useSettlements({
limit: pageSize,
offset: page * pageSize,
});
const totalPages = Math.ceil(total / pageSize);
return (
<div>
{settlements.map(s => <SettlementRow key={s.id} settlement={s} />)}
<div>
<button onClick={() => setPage(p => p - 1)} disabled={page === 0}>Previous</button>
<span>Page {page + 1} of {totalPages}</span>
<button onClick={() => setPage(p => p + 1)} disabled={page >= totalPages - 1}>Next</button>
</div>
</div>
);
}