react-hexgrid

Interactive hexagon grids with React bindings

With inspiration from http://www.redblobgames.com/grids/hexagons.

Getting Started

Install it via npm:

npm install --save react-hexgrid

Example

import { HexGrid } from 'react-hexgrid';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    let boardConfig = {
      width: 800, height: 800,
      layout: { width: 10, height: 10, flat: true, spacing: 1.1 },
      origin: { x: 0, y: 0 },
      map: 'hexagon',
      mapProps: [ 2 ]
    }
    let grid = HexGrid.generate(boardConfig);
    this.state = { grid, config: boardConfig };
  }
  render() {
    let { grid, config } = this.state;

    return (
      <div className="App">
        <HexGrid width={config.width} height={config.height} hexagons={grid.hexagons} layout={grid.layout} />
      </div>
    );
  }
}

Will look something like this (custom CSS applied):

Configurations

{
    width: 1000, // Width of the viewbox
    height: 800, // Height of the viewbox
    layout: { // Settings on how the tiles looks like
        width: 8, // Width of a single tile
        height: 8, // Height of a single tile
        flat: false, // Defines is the tile pointy one or a flat one
        spacing: 1.1 // Spacing between the tiles
    },
    origin: { // Defines the offset for the grid. Depending on the grid type, you might need to adjust this
        x: 0,
        y: 0
    },
    map: 'hexagon', // Grid type (see GridGenerator.js)
                    // Possible values: hexagon, triangle, parallelogram, rectangle, orientedRectangle
    mapProps: [ 3 ] // Properties for the grid type (depends on the grid type)  (see GridGenerator.js)
                    // * 'hexagon': [ radius: Number ]
                    // * 'triangle': [ size: Number ]
                    // * 'parallelogram': [ q1: Number, q2: Number, r1: Number, r1: Number ]
                    // * 'rectangle': [ width: Number, height: Number ]
                    // * 'orientedRectangle': [ width: Number, height: Number ]
}

API reference

// Available classes
import { HexGrid, Layout, HexUtils, Hex } from 'react-hexgrid';

// Using HexGrid component
<HexGrid
  width={1000} // Width of the viewbox
  height={800}
  path={{ start: nex Hex(0,0,0), end: new Hex(3, -3, 0) }} // Path drawn from between the two points (WIP)
  actions={} // Action callbacks. See example for all available actions.
  hexagons={[]} // Hexagons, e.g. generated by HexGrid.generate or manually created list
  layout={layoutConfig} /> // Layout configuration, see configurations above. Affects how tiles get rendered.

• HexGrid.js, Main React component
  • HexGrid.generate(config)
    • Generates the hexagons. See configuration above.
• Layout.js, controls the look and feel
  • constructor(layout, origin)
    • layout : Object { width: Number, height: Number, flat: Boolean, spacing: Number })
    • origin : Object [optional] { x: Number, y: Number }
• HexUtils.js, Static methods for calculating distance, checking neighboring tiles, etc.
• Hex.js
  • contructor(q, r, s, props = {})
    • q, r, s : Number, coordinates
    • props : Object [optional] { text: String, image: String }

Examples

See examples folder.

1. basic-board- Just simple render of HexGrid
2. grid-types - All the different grid types and their configurations
3. tile-events - HexGrid with action functions passed down. Just logs to console when different events are triggered.
4. pathfinding - HexGrid with pathfinding from center of the grid to mouse.
5. custom-grid - Custom generated Hexagon grid and tile content

License

MIT