RoomKitFrontend
useBookings
List bookings with filters and cursor pagination
Overview
useBookings fetches a paginated list of bookings matching the given filters. It calls GET {apiUrl}/bookings with query parameters.
import { useBookings } from '@roomkit/react';Usage
function BookingList({ roomId }: { roomId: string }) {
const { data, isLoading, error, refetch } = useBookings({
filters: {
roomId,
startsAt: new Date('2026-03-01'),
endsAt: new Date('2026-03-31'),
},
pagination: { limit: 20 },
});
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<ul>
{data?.items.map((booking) => (
<li key={booking.id}>
{booking.title} — {booking.status}
</li>
))}
{data?.nextCursor && (
<button onClick={() => { /* load next page */ }}>
Load more
</button>
)}
</ul>
);
}UseBookingsOptions
interface UseBookingsOptions {
filters?: UseBookingsFilters;
pagination?: Pagination;
enabled?: boolean;
onSuccess?: (data: PaginatedResult<Booking>) => void;
onError?: (error: Error) => void;
}UseBookingsFilters
interface UseBookingsFilters {
personId?: string;
roomId?: string;
startsAt?: Date;
endsAt?: Date;
status?: string;
}| Option | Type | Required | Description |
|---|---|---|---|
filters | UseBookingsFilters | No | Filter criteria |
pagination | Pagination | No | { cursor?, limit } |
enabled | boolean | No | Set to false to skip the request |
onSuccess | (data) => void | No | Called when the request succeeds |
onError | (error) => void | No | Called when the request fails |
Return Value
| Field | Type | Description |
|---|---|---|
data | PaginatedResult<Booking> | null | Paginated bookings |
isLoading | boolean | true while the request is in flight |
error | Error | null | The error if the request failed |
refetch | () => Promise<void> | Manually re-fetch the data |
API Endpoint
GET {apiUrl}/bookings?personId=...&roomId=...&startsAt=...&endsAt=...&status=...&cursor=...&limit=...