chrisrittelmeyer / 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';
...
class Board extends React.Component {
  constructor(props) {
    super(props);
    let grid = HexGrid.generate(config.board);
    this.props.actions.createBoard(grid);
  }

  render() {
    let { grid, actions } = this.props;
    let config = {
      width: 800, height: 800,
      layout: { width: 10, height: 10, flat: true, spacing: 1.1 },
      origin: { x: 0, y: 0 },
      map: 'hexagon',
      mapProps: [ 2 ]
    }
    return (
      <HexGrid actions={actions} width={config.width} height={config.height}
        hexagons={grid.hexagons} layout={grid.layout} />
    )
  }
}

Will look something like this (custom CSS applied):

License

MIT