react-hex

    0.4.1 • Public • Published

    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

    Install

    npm i react-hex

    DownloadsWeekly Downloads

    12

    Version

    0.4.1

    License

    MIT

    Last publish

    Collaborators

    • airtoxin