BoardKitFrontend
usePageNavigation
Multi-page navigation, creation, and reordering
usePageNavigation manages multi-page boards — switching between pages, adding new pages, deleting pages, and reordering.
Signature
function usePageNavigation(): UsePageNavigationResult;Return Type
interface UsePageNavigationResult {
pages: Page[];
activePage: Page | null;
switchPage: (pageId: string) => void;
addPage: () => void;
deletePage: (pageId: string) => void;
reorderPages: (pageIds: string[]) => void;
}| Property | Description |
|---|---|
pages | All pages in the current board |
activePage | The currently displayed page, or null |
switchPage | Navigate to a different page by ID |
addPage | Create a new page (auto-named "Page N") and switch to it |
deletePage | Remove a page by ID; switches to first remaining page if the active page is deleted |
reorderPages | Reorder pages by providing page IDs in the desired order |
Usage
import { usePageNavigation } from '@hfu.digital/boardkit-react';
function PageTabs() {
const { pages, activePage, switchPage, addPage, deletePage } = usePageNavigation();
return (
<div>
{pages.map((page) => (
<div key={page.id}>
<button
onClick={() => switchPage(page.id)}
data-active={page.id === activePage?.id}
>
{page.name}
</button>
{pages.length > 1 && (
<button onClick={() => deletePage(page.id)}>x</button>
)}
</div>
))}
<button onClick={addPage}>+ Add Page</button>
</div>
);
}Reordering
Pass an array of page IDs in the new desired order:
const { pages, reorderPages } = usePageNavigation();
// Move the last page to the front
const reordered = [pages[pages.length - 1].id, ...pages.slice(0, -1).map(p => p.id)];
reorderPages(reordered);Each page's order field is updated to match its index in the new array.