/react-hex

hexagonal grids with react.js

Primary LanguageJavaScriptMIT LicenseMIT

react-hex Build Status

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'));

hexes

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

pointy-topped

flat topped grid coordinate x,y

flat-topped

License

MIT