BoardKitProvider

BoardKitProvider is the root context provider for BoardKit. It instantiates the BoardStore, Canvas2DRenderer, and ToolRegistry and makes them available to all child hooks and components.

Usage

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

function App() {
    return (
        <BoardKitProvider
            config={{
                apiUrl: '/api',
                wsUrl: 'ws://localhost:3000/board',
                authToken: 'your-jwt-token',
                theme: {
                    selectionColor: '#3b82f6',
                    handleColor: '#1d4ed8',
                },
            }}
        >
            <YourApp />
        </BoardKitProvider>
    );
}

BoardKitConfig

interface BoardKitConfig {
    apiUrl: string;
    wsUrl?: string;
    authToken?: string;
    theme?: Partial<BoardKitTheme>;
}

Property	Required	Description
`apiUrl`	Yes	Base URL for the REST API (e.g., `/api` or `https://api.example.com`)
`wsUrl`	No	WebSocket URL for realtime collaboration (e.g., `ws://localhost:3000/board`)
`authToken`	No	Bearer token for authentication (sent with all API and WebSocket requests)
`theme`	No	Visual customization options

BoardKitTheme

interface BoardKitTheme {
    selectionColor: string;
    handleColor: string;
    cursorLabelFont: string;
}

Property	Description
`selectionColor`	Color of the selection box and selection highlights
`handleColor`	Color of resize/rotation handles
`cursorLabelFont`	Font used for remote cursor name labels

BoardKitProviderProps

interface BoardKitProviderProps {
    config: BoardKitConfig;
    children: React.ReactNode;
}

useBoardKit

Access the context value from any child component:

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

function MyComponent() {
    const { store, renderer, toolRegistry, config } = useBoardKit();
    // Direct access to the store, renderer, and tool registry
}

interface BoardKitContextValue {
    store: BoardStore;
    renderer: Canvas2DRenderer;
    toolRegistry: ToolRegistry;
    config: BoardKitConfig;
}

Throws an error if called outside of a BoardKitProvider.

Implementation Details

BoardStore, Canvas2DRenderer, and ToolRegistry are created once using useRef (stable across re-renders).
The ToolRegistry is initialized with all default tools via ToolRegistry.createDefault().
The renderer is cleaned up (.destroy()) when the provider unmounts.
The context value is memoized and only changes when config changes.