{"id":13553313,"url":"https://github.com/Hellenic/react-hexgrid","last_synced_at":"2025-04-03T05:30:30.067Z","repository":{"id":6147686,"uuid":"54875316","full_name":"Hellenic/react-hexgrid","owner":"Hellenic","description":"Build interactive hexagon grids with React","archived":false,"fork":false,"pushed_at":"2024-07-31T18:24:34.000Z","size":3096,"stargazers_count":324,"open_issues_count":32,"forks_count":131,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-18T03:55:03.566Z","etag":null,"topics":["hexagonal-grids","maintainer-wanted","react"],"latest_commit_sha":null,"homepage":"https://hellenic.github.io/react-hexgrid/examples/","language":"TypeScript","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/Hellenic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-03-28T07:38:24.000Z","updated_at":"2025-03-14T08:15:40.000Z","dependencies_parsed_at":"2024-01-17T16:08:33.779Z","dependency_job_id":"9e604c06-de1b-482c-b294-8753d17c1412","html_url":"https://github.com/Hellenic/react-hexgrid","commit_stats":{"total_commits":198,"total_committers":16,"mean_commits":12.375,"dds":0.5808080808080809,"last_synced_commit":"470a2284d3d2f29a4cf0edb3846f6484e99a421c"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hellenic%2Freact-hexgrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hellenic%2Freact-hexgrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hellenic%2Freact-hexgrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hellenic%2Freact-hexgrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hellenic","download_url":"https://codeload.github.com/Hellenic/react-hexgrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944377,"owners_count":20858773,"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":["hexagonal-grids","maintainer-wanted","react"],"created_at":"2024-08-01T12:02:21.959Z","updated_at":"2025-04-03T05:30:29.335Z","avatar_url":"https://github.com/Hellenic.png","language":"TypeScript","funding_links":[],"categories":["JavaScript","react","TypeScript"],"sub_categories":[],"readme":"# react-hexgrid\n\n![Downloads](https://img.shields.io/npm/dt/react-hexgrid.svg)\n![npm version](https://img.shields.io/npm/v/react-hexgrid.svg)\n![dependencies Status](https://img.shields.io/librariesio/github/hellenic/react-hexgrid)\n[![Live demo](https://img.shields.io/badge/live-demo-brightgreen.svg?style=flat-square)](https://hellenic.github.io/react-hexgrid/examples/)\n![License](https://img.shields.io/npm/l/react-hexgrid.svg)\n\nReact components to build interactive hexagon grids. This library uses SVG and allows you to create fully customizable and scalable interactive hexagon grids with a simple api.\n\nThe component based approach allows you to customize the grid shape to suit your needs or even apply your own components or SVG elements to it. You can use the pre-defined generator to create certain grid shapes or you may build your own grid as you wish, while still keeping it under control and interactive.\n\nYou could easily use this library to build a nice portfolio, image library or even a game (just to name a few)! [![youtube video about hexagons](Hexagons are the bestagons)](https://www.youtube.com/watch?v=thOifuHs6eY), enjoy!\n\n\u003e With inspiration from\n\u003e [http://www.redblobgames.com/grids/hexagons](http://www.redblobgames.com/grids/hexagons).\n\n\u003e 🖊️ Codepen to play around with: https://codepen.io/hellenic/project/editor/AYMbMM#\n\n\u003e Discord server: https://discord.gg/TxNb6EZZZE\n\n## Upcoming Version 2\n\nThe new version should not contain any breaking changes. There is typescript support, some storybook examples for easy development and testing. The new version uses the newer react context api under the hood.\nThough there should not be any breaking changes, there could be issues. Feel free to checkout the current beta release and give feedback.\n\nInstall via:\n\n```\nnpm install react-hexgrid@beta\n```\n\n## Getting Started\n\nInstall it via npm:\n\n```shell\nnpm install --save react-hexgrid\n```\n\nMore documentation in the [Wiki](https://github.com/Hellenic/react-hexgrid/wiki).\n\n## Coordinate system\n\nThis hexagonal grid uses a cubic coordinate system with three coordinates q, r and s.\n![cubic Coordinates](https://raw.githubusercontent.com/Hellenic/react-hexgrid/add-typescript-and-storybook/coordinates.png \"Coordinates\"). If you want to read about some hexagon mathematics and different coordinate systems maybe have a look at https://www.redblobgames.com/grids/hexagons/\n\n## Example\n\n```html\nimport { HexGrid, Layout, Hexagon, Text, Pattern, Path, Hex } from 'react-hexgrid';\nimport './App.css';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cHexGrid width={1200} height={800} viewBox=\"-50 -50 100 100\"\u003e\n          {/* Grid with manually inserted hexagons */}\n          \u003cLayout size={{ x: 10, y: 10 }} flat={true} spacing={1.1} origin={{ x: 0, y: 0 }}\u003e\n            \u003cHexagon q={0} r={0} s={0} /\u003e\n            {/* Using pattern (defined below) to fill the hexagon */}\n            \u003cHexagon q={0} r={-1} s={1} fill=\"pat-1\" /\u003e\n            \u003cHexagon q={0} r={1} s={-1} /\u003e\n            \u003cHexagon q={1} r={-1} s={0}\u003e\n              \u003cText\u003e1, -1, 0\u003c/Text\u003e\n            \u003c/Hexagon\u003e\n            \u003cHexagon q={1} r={0} s={-1}\u003e\n              \u003cText\u003e1, 0, -1\u003c/Text\u003e\n            \u003c/Hexagon\u003e\n            {/* Pattern and text */}\n            \u003cHexagon q={-1} r={1} s={0} fill=\"pat-2\"\u003e\n              \u003cText\u003e-1, 1, 0\u003c/Text\u003e\n            \u003c/Hexagon\u003e\n            \u003cHexagon q={-1} r={0} s={1} /\u003e\n            \u003cHexagon q={-2} r={0} s={1} /\u003e\n            \u003cPath start={new Hex(0, 0, 0)} end={new Hex(-2, 0, 1)} /\u003e\n          \u003c/Layout\u003e\n          \u003cPattern id=\"pat-1\" link=\"http://cat-picture\" /\u003e\n          \u003cPattern id=\"pat-2\" link=\"http://cat-picture2\" /\u003e\n        \u003c/HexGrid\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nWill look something like this (custom CSS applied):\n![HexGrid image](https://raw.githubusercontent.com/Hellenic/react-hexgrid/master/react-hexgrid.png \"HexGrid\")\n\n# Styling\n\nThere are many options on how to apply css styling. Examples of inline styling, classic css styling and css-in-js styling with emotion are shown in the storybook examples (under /src/stories/).\n\n# Drag and drop\n\nThere are examples of drag and drop implementations with native html5 drag and drop api, however these are not yet really well worked out. Feel free to jump in and maybe provide implementations with other drag and drop libraries.\n\n## Examples / Storybook\n\nTo run storybook run `npm i` and then `npm run storybook`. Other examples are available in the examples (standalone versions based on create react app).\n\n### Basics\n\n1. [basic-board](https://github.com/Hellenic/react-hexgrid/tree/master/examples/basic-board) - Basic usage of react-hexgrid\n2. [custom-grid](https://github.com/Hellenic/react-hexgrid/tree/master/examples/custom-grid) - Simple custom grid\n3. [templates](https://github.com/Hellenic/react-hexgrid/tree/master/examples/templates) - Ready-made grid templates\n\n### Advanced\n\n1. [pathfinding](https://github.com/Hellenic/react-hexgrid/tree/master/examples/pathfinding) - Pathfinding\n2. [drag \u0026 drop](https://github.com/Hellenic/react-hexgrid/tree/master/examples/drag-and-drop) - Drag \u0026 drop with two grids\n3. [animations](https://github.com/Hellenic/react-hexgrid/tree/master/examples/animations) - Animations \u0026 effects\n\n## Testing changes locally\n\nYou can test changes locally by running storybook. You can also use something like npm 7 workspaces to link this library on your local file system side by side with your application.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHellenic%2Freact-hexgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHellenic%2Freact-hexgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHellenic%2Freact-hexgrid/lists"}