https://github.com/airtoxin/react-triangle

draw svg triangle grid with react
https://github.com/airtoxin/react-triangle

grid react react-component react-components svg triangle

Last synced: about 9 hours ago
JSON representation

draw svg triangle grid with react

• Host: GitHub
• URL: https://github.com/airtoxin/react-triangle
• Owner: airtoxin
• License: mit
• Created: 2016-04-12T13:03:36.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-24T17:33:57.000Z (almost 2 years ago)
• Last Synced: 2024-10-20T04:31:58.692Z (17 days ago)
• Topics: grid, react, react-component, react-components, svg, triangle
• Language: JavaScript
• Homepage: https://airtoxin.github.io/react-triangle/
• Size: 1.54 MB
• Stars: 9
• Watchers: 3
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-triangle [![Build Status](https://travis-ci.org/airtoxin/react-triangle.svg?branch=master)](https://travis-ci.org/airtoxin/react-triangle)

draw svg triangle grid with react

![img/screen.png](img/screen.png)

## Install

`$ npm install react-triangle`

## Example

```javascript

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 => (

    

  ));

  return (

    

      {triangles}

    

  );

};

ReactDom.render(, document.getElementById('example'));

```

![img/usagetriangles.png](img/usagetriangles.png)

More examples, see [Storybook](https://airtoxin.github.io/react-triangle).

## Documents

### `` (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 |

```js

import Triangle from 'react-triangle';

```

### `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   |

```js

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

const { props } = gridPoint('up', 0, 0, 50, 3, 4);

```

### `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                           |

```js

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

const triangles = gridPoints('up', 0, 0, 50, 5, 10).map(({ props, gridX, gridY }) => (

  

));

```