@live-canvas/react

React bindings for the @live-canvas/core collaborative whiteboard engine.

Install

npm install @live-canvas/react fabric react

Quick Start

import { WhiteboardProvider, WhiteboardCanvas } from '@live-canvas/react';

function App() {
  return (
    <WhiteboardProvider>
      <WhiteboardCanvas width={1024} height={768} />
      <Toolbar />
    </WhiteboardProvider>
  );
}

Hooks

| Hook | Description | |------|-------------| | useEditor() | Access the core Editor instance | | useStore() | Access the RecordStore | | useCurrentTool() | Subscribe to the active tool ID | | useActivePath() | Subscribe to the full state path | | useSelectedShapeIds() | Subscribe to selected shape IDs | | useSelectedRecord() | Subscribe to the first selected shape's record | | useCanUndo() | Subscribe to undo availability | | useCanRedo() | Subscribe to redo availability | | useShapeCount() | Subscribe to the total shape count |

All hooks use useSyncExternalStore for tear-free, fine-grained reactivity.

License

MIT