RoomKitFrontend
useLocationTree
Fetch the hierarchical location tree
Overview
useLocationTree fetches the location hierarchy as a tree. It calls GET {apiUrl}/locations/tree.
import { useLocationTree } from '@roomkit/react';Usage
function LocationPicker() {
const { data, isLoading, error } = useLocationTree({
scope: 'campus-a', // optional: scope to a specific subtree
});
if (isLoading) return <div>Loading locations...</div>;
return (
<ul>
{data?.map((node) => (
<LocationTreeItem key={node.id} node={node} />
))}
</ul>
);
}
function LocationTreeItem({ node }: { node: LocationTreeNode }) {
return (
<li>
{node.displayName} ({node.type})
{node.children.length > 0 && (
<ul>
{node.children.map((child) => (
<LocationTreeItem key={child.id} node={child} />
))}
</ul>
)}
</li>
);
}UseLocationTreeOptions
interface LocationTreeNode extends LocationNode {
children: LocationTreeNode[];
}
interface UseLocationTreeOptions {
scope?: string;
enabled?: boolean;
onSuccess?: (data: LocationTreeNode[]) => void;
onError?: (error: Error) => void;
}| Option | Type | Required | Description |
|---|---|---|---|
scope | string | No | Location node ID to scope the tree to a subtree |
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 | LocationTreeNode[] | null | Tree of location nodes |
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}/locations/tree?scope=...