react-triangle v0.3.0

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.

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

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

import Triangle, { gridPoints } from 'react-triangle';

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