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" />
  ));
 
  return (
    <svg width="500" height="500">
      {hexes}
    </svg>
  );
};
 
ReactDom.render(<Hexes />); document.getElementById('example'));

More examples, see Storybook.

Documents

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

Main React component of hex.

name	value type	description
type	PropTypes.oneOf(['pointy-topped', 'flat-topped']).isRequired	hexagon type
x	PropTypes.number.isRequired	hexagon's center coordinate x
y	PropTypes.number.isRequired	hexagon's center coordinate y
size	PropTypes.number.isRequired	hexagon edge length

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

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

name	value type	description
oType	'pointy-topped' or 'flat-topped'	original hexagon type
oX	number	original hexagon's center coordinate x
oY	number	original hexagon's center coordinate y
size	number	hexagon edge length
gridX	number	coordinate x in hexagonal grid system
gridY	number	coordinate y in hexagonal grid system

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

name	value type	description
oType	'pointy-topped' or 'flat-topped'	original hexagon type
oX	number	original hexagon's center coordinate x
oY	number	original hexagon's center coordinate y
size	number	hexagon edge length
gridWidth	number	grid size of x
gridHeight	number	grid size of y

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}/>
));

pointy topped grid coordinate x,y

flat topped grid coordinate x,y

License

MIT