react-triangle

draw svg triangle grid with react

Install

$ npm install react-triangle

Example

import React from 'react';
import ReactDom from 'react-dom';
import Triangle, { gridPoints } from 'react-triangle';
 
const Triangles = () => {
  const triangles = gridPoints('up', 0, 0, 50, 10, 5).map(props => (
    <Triangle key={`${props.x}-${props.y}`} {...props} stroke="white"/>
  ));
 
  return (
    <svg width="500" height="500">
      {triangles}
    </svg>
  );
};
 
ReactDom.render(<Triangles />, document.getElementById('example'));

More examples, see Storybook.

Documents

<Triangle direction={} x={} y={} size={}/> (default exported)

Main React component of triangle.

name	PropTypes	description
direction	PropTypes.oneOf(['up', 'down', 'left', 'right']).isRequired	triangle direction
x	PropTypes.number.isRequired	center coordinate x
y	PropTypes.number.isRequired	center coordinate y
size	PropTypes.number.isRequired	triangle edge length

import Triangle from 'react-triangle';
 
<Triangle direction="up" x={0} y={0} size={50} />

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

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

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

(prefix o means original.)

name	value type	description
oDirection	'up' or 'down' or 'left' or 'right'	original triangle direction
oX	number	original triangle's center coordinate x
oY	number	original triangle's center coordinate y
size	number	triangle edge length
gridX	integer	coordinate x in hexagonal grid system
gridY	integer	coordinate y in hexagonal grid system

import Triangle, { gridPoint } from 'react-triangle';
 
const { props } = gridPoint('up', 0, 0, 50, 3, 4);
<Triangle {...props}/>

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

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

Helper function to bulk calculate triangles location of grid.

(prefix o means original.)

name	value type	description
oDirection	'up' or 'down' or 'left' or 'right'	original triangle direction
oX	number	original triangle's center coordinate x
oY	number	original triangle's center coordinate y
size	number	triangle edge length
gridWidth	integer	grid size of x
gridHeight	integer	grid size of y

import Triangle, { gridPoints } from 'react-triangle';
 
const triangles = gridPoints('up', 0, 0, 50, 5, 10).map(({ props, gridX, gridY }) => (
  <Triangle key={`${gridX}-${gridY}`} {...props}/>
));