Skip to main content
Deno 2 is finally here 🎉️
Learn more

React Isometric Tilemap

Latest version LGPL 3.0 Deno Doc (API references) GitHub Actions

A library for displaying tilemaps and handling events on it. See also the demo app first!

It was originally written by Ramiro Rojo in JavaScript. This project forked it and then rewrote it in TypeScript and let it work on Deno & Aleph.js.

How to use

Import this library in your code:

// The map is the basic container, the tile is each square
import IsometricMap, {
  IsometricTile
} from "https://deno.land/x/react_isometric_tilemap/mod.ts";

Now you can create your own map with it:

const MyMap = () => {
  <IsometricMap mapWidth={1} mapHeight={1} tileSize={32} slabSize={8}>
    <IsometricTile x={0} y={0} z={3} />
  </IsometricMap>;
};

Please refer for the documentation for more details about the components provided. See also the source code of the demo app in demo/ directory.

Changelog

Version 2.0.0

Released on January 26, 2022.

This release is equivalent 0.2.0, but purposes to overwrite the mis-tagged previous releases: 0.2.0 and 1.0.0.

Version 0.2.0

Released on January 25, 2022.

  • Added debug?: boolean attribute to IsometricTileProps.

Version 0.1.0

Initial release. Released on January 20, 2022.