@ue-too/board-react-adapter v0.15.0

React adapter for the @ue-too/board infinite canvas library.

Remarks

This package provides React components and hooks to integrate the @ue-too/board infinite canvas into React applications. It handles lifecycle management, state synchronization, and provides idiomatic React patterns for working with the board.

Core Components

• Board: Main component that renders the canvas and manages the board instance
• BoardProvider: Context provider for sharing board across components

State Hooks

• useBoardCameraState: Subscribe to specific camera state (position, rotation, zoomLevel)
• useAllBoardCameraState: Subscribe to all camera state at once
• useBoard: Access the board instance from context
• useBoardCamera: Access the camera instance from context

Control Hooks

• useCameraInput: Get camera control functions (pan, zoom, rotate)
• useCustomCameraMux: Set a custom camera multiplexer
• useBoardify: Create a standalone board instance (alternative to provider)

Animation Hooks

• useAnimationFrame: Generic animation frame hook
• useAnimationFrameWithBoard: Animation loop integrated with board.step()

Key Features

• Automatic State Sync: Camera state changes trigger React re-renders
• Performance Optimized: Uses useSyncExternalStore for efficient subscriptions
• Type-Safe: Full TypeScript support with type inference
• Context-Based: Share board instance across component tree
• Lifecycle Management: Automatic cleanup and resource management

Examples

Basic usage

import Board from '@ue-too/board-react-adapter';

function App() {
  return (
    <Board
      width={800}
      height={600}
      animationCallback={(timestamp, ctx) => {
        ctx.fillStyle = 'blue';
        ctx.fillRect(0, 0, 100, 100);
      }}
    />
  );
}

With camera controls

import Board, {
  useBoardCameraState,
  useCameraInput
} from '@ue-too/board-react-adapter';

function Controls() {
  const position = useBoardCameraState('position');
  const { panToWorld, zoomTo } = useCameraInput();

  return (
    <div>
      <p>Position: {position.x}, {position.y}</p>
      <button onClick={() => panToWorld({ x: 0, y: 0 })}>Center</button>
      <button onClick={() => zoomTo(1.0)}>Reset Zoom</button>
    </div>
  );
}

function App() {
  return (
    <Board width={800} height={600}>
      <Controls />
    </Board>
  );
}

See

Board for the main component

Components

• BoardProps
• BoardProvider

Hooks

• useAllBoardCameraState
• useAnimationFrame
• useAnimationFrameWithBoard
• useBoard
• useBoardCamera
• useBoardCameraState
• useCameraInput
• useCustomCameraMux

Other

• useCanvasDimension
• useCanvasProxy
• useCanvasProxyWithRef
• useCoordinateConversion
• useCustomInputHandling
• useCustomKMTEventParser
• useCustomTouchEventParser