awatson1978 / react-hexgrid

Interactive hexagon grids with React

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 react-hexgrid

And include in your project:

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):

More examples can be found from examples folder. Another project using this library (with actions): https://github.com/Hellenic/Cardeon/tree/master/game

License

MIT