RoomKitFrontend
useBooking
Fetch a single booking by ID
Overview
useBooking fetches a single booking by its ID. It calls GET {apiUrl}/bookings/{bookingId}.
import { useBooking } from '@roomkit/react';Usage
function BookingDetail({ bookingId }: { bookingId: string }) {
const { data, isLoading, error, refetch } = useBooking({
bookingId,
});
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
if (!data) return <div>Not found</div>;
return (
<div>
<h2>{data.title}</h2>
<p>Status: {data.status}</p>
<p>Room: {data.roomId}</p>
<p>{data.startsAt} — {data.endsAt}</p>
</div>
);
}UseBookingOptions
interface UseBookingOptions {
bookingId: string;
enabled?: boolean;
onSuccess?: (data: Booking) => void;
onError?: (error: Error) => void;
}| Option | Type | Required | Description |
|---|---|---|---|
bookingId | string | Yes | The booking ID to fetch |
enabled | boolean | No | Set to false to skip the request (default: true) |
onSuccess | (data) => void | No | Called when the request succeeds |
onError | (error) => void | No | Called when the request fails |
Return Value
| Field | Type | Description |
|---|---|---|
data | Booking | null | The fetched booking |
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/{bookingId}