BoardKitFrontend
useBoard
Load board data and pages from the API
useBoard fetches board data and pages from the REST API and syncs them into the BoardStore.
Signature
function useBoard(boardId: string): UseBoardResult;Return Type
interface UseBoardResult {
board: Board | null;
pages: Page[];
loading: boolean;
error: string | null;
reload: () => void;
}| Property | Description |
|---|---|
board | The loaded board object, or null while loading |
pages | Array of pages belonging to the board |
loading | true while the initial fetch is in progress |
error | Error message if the fetch failed, or null |
reload | Function to re-fetch the board data |
Usage
import { useBoard } from '@hfu.digital/boardkit-react';
function BoardHeader({ boardId }: { boardId: string }) {
const { board, pages, loading, error, reload } = useBoard(boardId);
if (loading) return <p>Loading board...</p>;
if (error) return <p>Error: {error} <button onClick={reload}>Retry</button></p>;
return (
<div>
<h1>{board?.name}</h1>
<p>{pages.length} pages</p>
</div>
);
}Behavior
- On mount (and when
boardIdchanges), fetchesGET {apiUrl}/boards/{boardId} - Sends
Authorization: Bearer {authToken}if configured - Populates the
BoardStorewith board data, pages, and sets the first page as active - Subscribes to the
boardandpagesstore slices for reactive updates - Re-renders when the store data changes (e.g., from collaboration updates)