Skip to content
draw svg triangle grid with react
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
img
src
stories
test
.babelrc
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

react-triangle Build Status

draw svg triangle grid with react

img/screen.png

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

img/usagetriangles.png

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 tirianglar grid system
gridY integer coordinate y in tirianglar 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}/>
));
You can’t perform that action at this time.