react-hex

draw svg hexagonal grid with react

Install

$ npm i react-hex

Example

import React from 'react';
import ReactDom from 'react-dom';
import Hex, { gridPoints } from 'react-hex';
const Hexes = () => {
  const hexes = gridPoints('pointy-topped', 100, 100, 10, 25, 25).map(({ props }) => (
    <Hex {...props} fill="white" stroke="black" ></Hex>
  ));
  return (
    <svg width="500" height="500">
      {hexes}
    </svg>
  );
};
ReactDom.render(<Hexes ></Hexes>); document.getElementById('example'));

More examples, see Storybook.

Documents

<Hex type={} x={} y={} size={} ></Hex> (default exported)

Main React component of hex.

import Hex from 'react-hex';
<Hex type="pointy-topped" x={0} y={0} size={50} ></Hex>

gridPoint(oType, oX, oY, size, gridX, gridY)

return: { props: { type, x, y, size }, gridX, gridY }

Helper function to calculate hex location in grid.
props field in returning object of this function can use for props of Hex component.

(prefix o means original.)

import Triangle, { gridPoint } from 'react-hex';
const { props } = gridPoint('pointy-topped', 0, 0, 50, 3, 4);

gridPoints(oDirection, oX, oY, size, girdWidth, gridHeight)

return: [ { props: { type, x, y, size }, gridX, gridY }, ... ]

Helper function to bulk calculate hexes location of grid.

(prefix o means original.)

import Hex, { gridPoints } from 'react-hex';
const triangles = gridPoints('pointy-topped', 100, 100, 50, 5, 5).map(({ props, gridX, gridY }) = (
  <Hex key={`${gridX}-${gridY}`} {...props}></Hex>
));

pointy topped grid coordinate x,y

flat topped grid coordinate x,y

License

MIT