{"id":18428103,"url":"https://github.com/airtoxin/react-triangle","last_synced_at":"2025-04-07T16:34:15.486Z","repository":{"id":40802477,"uuid":"56063624","full_name":"airtoxin/react-triangle","owner":"airtoxin","description":"draw svg triangle grid with react","archived":false,"fork":false,"pushed_at":"2023-01-24T17:33:57.000Z","size":1619,"stargazers_count":9,"open_issues_count":11,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T00:44:04.611Z","etag":null,"topics":["grid","react","react-component","react-components","svg","triangle"],"latest_commit_sha":null,"homepage":"https://airtoxin.github.io/react-triangle/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/airtoxin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-12T13:03:36.000Z","updated_at":"2024-09-05T16:23:05.000Z","dependencies_parsed_at":"2023-02-14T00:00:36.398Z","dependency_job_id":null,"html_url":"https://github.com/airtoxin/react-triangle","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airtoxin%2Freact-triangle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airtoxin%2Freact-triangle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airtoxin%2Freact-triangle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airtoxin%2Freact-triangle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/airtoxin","download_url":"https://codeload.github.com/airtoxin/react-triangle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247619315,"owners_count":20967951,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid","react","react-component","react-components","svg","triangle"],"created_at":"2024-11-06T05:12:48.169Z","updated_at":"2025-04-07T16:34:15.202Z","avatar_url":"https://github.com/airtoxin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-triangle [![Build Status](https://travis-ci.org/airtoxin/react-triangle.svg?branch=master)](https://travis-ci.org/airtoxin/react-triangle)\ndraw svg triangle grid with react\n\n![img/screen.png](img/screen.png)\n\n## Install\n\n`$ npm install react-triangle`\n\n## Example\n\n```javascript\nimport React from 'react';\nimport ReactDom from 'react-dom';\nimport Triangle, { gridPoints } from 'react-triangle';\n\nconst Triangles = () =\u003e {\n  const triangles = gridPoints('up', 0, 0, 50, 10, 5).map(props =\u003e (\n    \u003cTriangle key={`${props.x}-${props.y}`} {...props} stroke=\"white\"/\u003e\n  ));\n\n  return (\n    \u003csvg width=\"500\" height=\"500\"\u003e\n      {triangles}\n    \u003c/svg\u003e\n  );\n};\n\nReactDom.render(\u003cTriangles /\u003e, document.getElementById('example'));\n```\n\n![img/usagetriangles.png](img/usagetriangles.png)\n\nMore examples, see [Storybook](https://airtoxin.github.io/react-triangle).\n\n## Documents\n\n### `\u003cTriangle direction={} x={} y={} size={}/\u003e` (default exported)\n\nMain React component of triangle.\n\n| name      | PropTypes                                                   | description          |\n|-----------|-------------------------------------------------------------|----------------------|\n| direction | PropTypes.oneOf(['up', 'down', 'left', 'right']).isRequired | triangle direction   |\n| x         | PropTypes.number.isRequired                                 | center coordinate x  |\n| y         | PropTypes.number.isRequired                                 | center coordinate y  |\n| size      | PropTypes.number.isRequired                                 | triangle edge length |\n\n```js\nimport Triangle from 'react-triangle';\n\n\u003cTriangle direction=\"up\" x={0} y={0} size={50} /\u003e\n```\n\n### `gridPoint(oDirection, oX, oY, size, gridX, gridY)`\n\n__return: `{ props: { direction, x, y, size }, gridX, gridY }`__\n\nHelper function to calculate triangle location in grid.\n`props` field in returning object of this function can use for props of `Triangle` component.\n\n(prefix `o` means original.)\n\n| name       | value type                          | description                              |\n|------------|-------------------------------------|------------------------------------------|\n| oDirection | 'up' or 'down' or 'left' or 'right' | original triangle direction              |\n| oX         | number                              | original triangle's center coordinate x  |\n| oY         | number                              | original triangle's center coordinate y  |\n| size       | number                              | triangle edge length                     |\n| gridX      | integer                             | coordinate x in tirianglar grid system   |\n| gridY      | integer                             | coordinate y in tirianglar grid system   |\n\n```js\nimport Triangle, { gridPoint } from 'react-triangle';\n\nconst { props } = gridPoint('up', 0, 0, 50, 3, 4);\n\u003cTriangle {...props}/\u003e\n```\n\n### `gridPoints(oDirection, oX, oY, size, gridWidth, gridHeight)`\n\n__return: `[ { props: { direction, x, y, size }, gridX, gridY }, ... ]`__\n\nHelper function to bulk calculate triangles location of grid.\n\n(prefix `o` means original.)\n\n| name       | value type                          | description                              |\n|------------|-------------------------------------|------------------------------------------|\n| oDirection | 'up' or 'down' or 'left' or 'right' | original triangle direction              |\n| oX         | number                              | original triangle's center coordinate x  |\n| oY         | number                              | original triangle's center coordinate y  |\n| size       | number                              | triangle edge length                     |\n| gridWidth  | integer                             | grid size of x                           |\n| gridHeight | integer                             | grid size of y                           |\n\n```js\nimport Triangle, { gridPoints } from 'react-triangle';\n\nconst triangles = gridPoints('up', 0, 0, 50, 5, 10).map(({ props, gridX, gridY }) =\u003e (\n  \u003cTriangle key={`${gridX}-${gridY}`} {...props}/\u003e\n));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairtoxin%2Freact-triangle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fairtoxin%2Freact-triangle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairtoxin%2Freact-triangle/lists"}