{"id":18428134,"url":"https://github.com/airtoxin/react-hex","last_synced_at":"2025-04-07T16:34:18.694Z","repository":{"id":12008285,"uuid":"56012971","full_name":"airtoxin/react-hex","owner":"airtoxin","description":"hexagonal grids with react.js","archived":false,"fork":false,"pushed_at":"2023-01-24T17:38:12.000Z","size":2031,"stargazers_count":24,"open_issues_count":10,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-07T00:44:04.615Z","etag":null,"topics":["grid","hex","hexagonal","react","react-component","react-components"],"latest_commit_sha":null,"homepage":"https://airtoxin.github.io/react-hex","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-11T22:38:33.000Z","updated_at":"2024-08-20T10:49:21.000Z","dependencies_parsed_at":"2023-02-14T00:01:44.230Z","dependency_job_id":null,"html_url":"https://github.com/airtoxin/react-hex","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airtoxin%2Freact-hex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airtoxin%2Freact-hex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airtoxin%2Freact-hex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airtoxin%2Freact-hex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/airtoxin","download_url":"https://codeload.github.com/airtoxin/react-hex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247688522,"owners_count":20979690,"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","hex","hexagonal","react","react-component","react-components"],"created_at":"2024-11-06T05:12:52.980Z","updated_at":"2025-04-07T16:34:18.332Z","avatar_url":"https://github.com/airtoxin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-hex [![Build Status](https://travis-ci.org/airtoxin/react-hex.svg?branch=master)](https://travis-ci.org/airtoxin/react-hex)\n\ndraw svg hexagonal grid with react\n\n## Install\n\n`$ npm i react-hex`\n\n## Example\n\n```javascript\nimport React from 'react';\nimport ReactDom from 'react-dom';\nimport Hex, { gridPoints } from 'react-hex';\n\nconst Hexes = () =\u003e {\n  const hexes = gridPoints('pointy-topped', 100, 100, 10, 25, 25).map(({ props }) =\u003e (\n    \u003cHex {...props} fill=\"white\" stroke=\"black\" /\u003e\n  ));\n\n  return (\n    \u003csvg width=\"500\" height=\"500\"\u003e\n      {hexes}\n    \u003c/svg\u003e\n  );\n};\n\nReactDom.render(\u003cHexes /\u003e); document.getElementById('example'));\n```\n\n![hexes](images/usage-example.png)\n\nMore examples, see [Storybook](https://airtoxin.github.io/react-hex).\n\n## Documents\n\n### `\u003cHex type={} x={} y={} size={} /\u003e` (default exported)\n\nMain React component of hex.\n\n| name | value type                                                   | description                             |\n|------|--------------------------------------------------------------|-----------------------------------------|\n| type | PropTypes.oneOf(['pointy-topped', 'flat-topped']).isRequired | hexagon type                            |\n| x    | PropTypes.number.isRequired                                  | hexagon's center coordinate x  |\n| y    | PropTypes.number.isRequired                                  | hexagon's center coordinate y  |\n| size | PropTypes.number.isRequired                                  | hexagon edge length                     |\n\n```js\nimport Hex from 'react-hex';\n\n\u003cHex type=\"pointy-topped\" x={0} y={0} size={50} /\u003e\n```\n\n### `gridPoint(oType, oX, oY, size, gridX, gridY)`\n\n__return: `{ props: { type, x, y, size }, gridX, gridY }`__\n\nHelper function to calculate hex location in grid.\n`props` field in returning object of this function can use for props of `Hex` component.\n\n(prefix `o` means original.)\n\n| name  | value type                       | description                             |\n|-------|----------------------------------|-----------------------------------------|\n| oType | 'pointy-topped' or 'flat-topped' | original hexagon type                   |\n| oX    | number                           | original hexagon's center coordinate x  |\n| oY    | number                           | original hexagon's center coordinate y  |\n| size  | number                           | hexagon edge length                     |\n| gridX | number                           | coordinate x in hexagonal grid system   |\n| gridY | number                           | coordinate y in hexagonal grid system   |\n\n```js\nimport Triangle, { gridPoint } from 'react-hex';\n\nconst { props } = gridPoint('pointy-topped', 0, 0, 50, 3, 4);\n```\n\n### `gridPoints(oDirection, oX, oY, size, girdWidth, gridHeight)`\n\n__return: `[ { props: { type, x, y, size }, gridX, gridY }, ... ]`__\n\nHelper function to bulk calculate hexes location of grid.\n\n(prefix `o` means original.)\n\n| name       | value type                       | description                             |\n|------------|----------------------------------|-----------------------------------------|\n| oType      | 'pointy-topped' or 'flat-topped' | original hexagon type                   |\n| oX         | number                           | original hexagon's center coordinate x  |\n| oY         | number                           | original hexagon's center coordinate y  |\n| size       | number                           | hexagon edge length                     |\n| gridWidth  | number                           | grid size of x                          |\n| gridHeight | number                           | grid size of y                          |\n\n```js\nimport Hex, { gridPoints } from 'react-hex';\n\nconst triangles = gridPoints('pointy-topped', 100, 100, 50, 5, 5).map(({ props, gridX, gridY }) = (\n  \u003cHex key={`${gridX}-${gridY}`} {...props}/\u003e\n));\n```\n\n__pointy topped grid coordinate x,y__\n\n![pointy-topped](images/pt-grid.png)\n\n__flat topped grid coordinate x,y__\n\n![flat-topped](images/ft-grid.png)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairtoxin%2Freact-hex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fairtoxin%2Freact-hex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairtoxin%2Freact-hex/lists"}