{"id":24440081,"url":"https://github.com/icculusc/react-hex-engine","last_synced_at":"2025-04-12T19:12:39.760Z","repository":{"id":33147576,"uuid":"153222299","full_name":"IcculusC/react-hex-engine","owner":"IcculusC","description":"React components and utilities for rendering SVG hexagon grids","archived":false,"fork":false,"pushed_at":"2022-12-10T02:33:49.000Z","size":3636,"stargazers_count":9,"open_issues_count":21,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T19:11:58.898Z","etag":null,"topics":["react","react-components","reactjs","rendering-2d-graphics","svg"],"latest_commit_sha":null,"homepage":"https://icculusc.github.io/react-hex-engine/","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/IcculusC.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":"2018-10-16T04:24:18.000Z","updated_at":"2024-12-13T18:17:44.000Z","dependencies_parsed_at":"2023-01-14T23:45:33.369Z","dependency_job_id":null,"html_url":"https://github.com/IcculusC/react-hex-engine","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IcculusC%2Freact-hex-engine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IcculusC%2Freact-hex-engine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IcculusC%2Freact-hex-engine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IcculusC%2Freact-hex-engine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IcculusC","download_url":"https://codeload.github.com/IcculusC/react-hex-engine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618282,"owners_count":21134201,"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":["react","react-components","reactjs","rendering-2d-graphics","svg"],"created_at":"2025-01-20T20:28:01.987Z","updated_at":"2025-04-12T19:12:39.737Z","avatar_url":"https://github.com/IcculusC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![GitHub release](https://img.shields.io/github/release/icculusc/react-hex-engine.svg)](https://github.com/IcculusC/react-hex-engine/releases/latest)\n[![CircleCI branch](https://img.shields.io/circleci/project/github/IcculusC/react-hex-engine/master.svg)](https://github.com/IcculusC/react-hex-engine/tree/master)\n[![GitHub pull requests](https://img.shields.io/github/issues-pr/icculusc/react-hex-engine.svg)](https://github.com/IcculusC/react-hex-engine/pulls)\n[![GitHub issues](https://img.shields.io/github/issues/icculusc/react-hex-engine.svg)](https://github.com/IcculusC/react-hex-engine/issues)\n[![GitHub last commit](https://img.shields.io/github/last-commit/icculusc/react-hex-engine.svg)](https://github.com/IcculusC/react-hex-engine/commits)\n[![Docs status](https://img.shields.io/badge/docs-in_progress-orange.svg)](https://icculusc.github.io/react-hex-engine/)\n\n# react-hex-engine\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [react-hex-grid](#credit) - credit where credit is due\n\n### Installation\n`yarn add react-hex-engine`\n\n### Usage\n\n##### Basic Example\n\nThis is the only example for now, but you can see more source in the [storybook](https://icculusc.github.io/react-hex-engine).\n\n```\nimport React from \"react\";\nimport { Hexagon, HexEngine } from \"react-hex-engine\";\n\nconst HexMap = () =\u003e (\n  \u003cHexEngine\n    spacing={1.05}\n    width={320}\n    height={240}\n    viewBox={{ x: -30, y: -30, width: 60, height: 60 }}\n  \u003e\n    \u003cHexagon q={-1} r={0} s={1} /\u003e\n    \u003cHexagon q={0} r={0} s={0} /\u003e\n    \u003cHexagon q={1} r={0} s={-1} /\u003e\n  \u003c/HexEngine\u003e\n)\n```\n\n# Credit\n\nOriginally forked from [https://github.com/Hellenic/react-hexgrid](https://github.com/Hellenic/react-hexgrid)\n\nQuote from the original readme\n\n\u003e React components to build interactive hexagons grids and games. It uses SVG which makes it fast, scalable and easy to apply custom styles. You can easily customize the layout of the grid just by configuration.\n\u003e\n\u003e Component-based approach allows you to customize the grid shape to suit your needs or even apply your own components / SVG elements to it. You can use pre-defined generator to create certain shape grid or you may build totally your own grid to the shape you wish, while still keeping it under control and interactive.\n\u003e\n\u003e You could easily use this library to build (just to name a few) a nice portfolio, image library or even a game!\n\u003e\n\u003e With inspiration from\n[http://www.redblobgames.com/grids/hexagons](http://www.redblobgames.com/grids/hexagons).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficculusc%2Freact-hex-engine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficculusc%2Freact-hex-engine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficculusc%2Freact-hex-engine/lists"}