@canvas-tile-engine/react

React bindings for Canvas Tile Engine — build interactive 2D grid-based maps with declarative components.

Install

npm install @canvas-tile-engine/react @canvas-tile-engine/renderer-canvas

Quick Start

import { CanvasTileEngine, useCanvasTileEngine } from "@canvas-tile-engine/react";
import { RendererCanvas } from "@canvas-tile-engine/renderer-canvas";

const config = {
    scale: 50,
    size: { width: 800, height: 600 },
    backgroundColor: "#337426",
    eventHandlers: { drag: true, zoom: true, click: true },
};

function App() {
    const engine = useCanvasTileEngine();

    return (
        <CanvasTileEngine
            engine={engine}
            config={config}
            renderer={new RendererCanvas()}
            center={{ x: 0, y: 0 }}
            onClick={(coords) => console.log("Clicked:", coords.snapped)}
        >
            <CanvasTileEngine.Rect items={[{ x: 0, y: 0, size: 1, style: { fillStyle: "#f9c74f" } }]} layer={0} />
            <CanvasTileEngine.GridLines cellSize={10} layer={1} />
        </CanvasTileEngine>
    );
}

Architecture

The React package wraps @canvas-tile-engine/core with declarative components. You inject a renderer via the renderer prop:

// Canvas2D
import { RendererCanvas } from "@canvas-tile-engine/renderer-canvas";
<CanvasTileEngine engine={engine} config={config} renderer={new RendererCanvas()} />

// Custom renderer
<CanvasTileEngine engine={engine} config={config} renderer={new MyCustomRenderer()} />

Documentation

Full API reference and examples: canvastileengine.dev

License

MIT