Components

BoardKit ships 11 pre-built components. These are optional wrappers around the hooks — use them for rapid prototyping or build your own UI.

BoardCanvas

The main canvas component. Renders two stacked <canvas> elements (static and interactive layers).

import { BoardCanvas } from '@hfu.digital/boardkit-react';

<BoardCanvas />

interface BoardCanvasProps {
    className?: string;
    style?: React.CSSProperties;
}

A tool selection bar showing all available tools.

import { Toolbar } from '@hfu.digital/boardkit-react';

<Toolbar activeTool={activeTool} onToolChange={setTool} />

interface ToolbarProps {
    activeTool: string;
    onToolChange: (toolId: string) => void;
    className?: string;
}

PageNavigator

Tabbed page navigation with add/delete controls.

import { PageNavigator } from '@hfu.digital/boardkit-react';

<PageNavigator />

interface PageNavigatorProps {
    className?: string;
}

SelectionHandles

Renders resize and rotation handles around selected elements.

import { SelectionHandles } from '@hfu.digital/boardkit-react';

<SelectionHandles />

interface SelectionHandlesProps {
    className?: string;
}

TextEditor

An inline text editor that appears when editing text elements or sticky notes.

import { TextEditor } from '@hfu.digital/boardkit-react';

<TextEditor />

interface TextEditorProps {
    className?: string;
}

ParticipantList

Displays avatars of active participants with their assigned colors.

import { ParticipantList } from '@hfu.digital/boardkit-react';

<ParticipantList />

interface ParticipantListProps {
    className?: string;
    maxVisible?: number;
}

CursorOverlay

Renders remote participants' cursors with name labels.

import { CursorOverlay } from '@hfu.digital/boardkit-react';

<CursorOverlay />

interface CursorOverlayProps {
    className?: string;
}

ShareDialog

A dialog for creating and managing share links.

import { ShareDialog } from '@hfu.digital/boardkit-react';

<ShareDialog boardId="board-id" open={isOpen} onClose={() => setIsOpen(false)} />

interface ShareDialogProps {
    boardId: string;
    open: boolean;
    onClose: () => void;
}

ExportDialog

A dialog for exporting the board to various formats.

import { ExportDialog } from '@hfu.digital/boardkit-react';

<ExportDialog boardId="board-id" open={isOpen} onClose={() => setIsOpen(false)} />

interface ExportDialogProps {
    boardId: string;
    open: boolean;
    onClose: () => void;
}

Minimap

A small overview of the entire board, showing the current viewport position.

import { Minimap } from '@hfu.digital/boardkit-react';

<Minimap />

interface MinimapProps {
    width?: number;
    height?: number;
    className?: string;
}

DropZone

An overlay that appears during drag-and-drop file imports.

import { DropZone } from '@hfu.digital/boardkit-react';

<DropZone boardId="board-id" />

interface DropZoneProps {
    boardId: string;
    className?: string;
}

Composing Components

A typical whiteboard layout uses these components together:

import {
    BoardKitProvider,
    BoardCanvas,
    Toolbar,
    PageNavigator,
    ParticipantList,
    CursorOverlay,
    SelectionHandles,
    Minimap,
    DropZone,
    useBoard,
    useTool,
    useKeyboardShortcuts,
    useCollaboration,
} from '@hfu.digital/boardkit-react';

function Whiteboard({ boardId }: { boardId: string }) {
    const { loading } = useBoard(boardId);
    const { activeTool, setTool } = useTool();
    useCollaboration(boardId);
    useKeyboardShortcuts();

    if (loading) return <p>Loading...</p>;

    return (
        <div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
            <Toolbar activeTool={activeTool} onToolChange={setTool} />
            <BoardCanvas />
            <CursorOverlay />
            <SelectionHandles />
            <PageNavigator />
            <ParticipantList />
            <Minimap />
            <DropZone boardId={boardId} />
        </div>
    );
}

Components

On this page