{"id":13402374,"url":"https://github.com/josephsurin/tiled-hexagons","last_synced_at":"2025-03-14T07:32:49.036Z","repository":{"id":34220664,"uuid":"171599900","full_name":"josephsurin/tiled-hexagons","owner":"josephsurin","description":"📦💻 Simple React single or tessellated 2D/3D hexagon buttons","archived":false,"fork":false,"pushed_at":"2022-12-08T13:46:06.000Z","size":2481,"stargazers_count":19,"open_issues_count":18,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-18T05:32:28.939Z","etag":null,"topics":["animated-button","button","button-component","hexagon","react","shape","svg"],"latest_commit_sha":null,"homepage":"https://josephsurin.github.io/tiled-hexagons","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/josephsurin.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":"2019-02-20T04:19:06.000Z","updated_at":"2024-08-22T18:17:23.000Z","dependencies_parsed_at":"2023-01-15T05:30:38.050Z","dependency_job_id":null,"html_url":"https://github.com/josephsurin/tiled-hexagons","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephsurin%2Ftiled-hexagons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephsurin%2Ftiled-hexagons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephsurin%2Ftiled-hexagons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephsurin%2Ftiled-hexagons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josephsurin","download_url":"https://codeload.github.com/josephsurin/tiled-hexagons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243542953,"owners_count":20308003,"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":["animated-button","button","button-component","hexagon","react","shape","svg"],"created_at":"2024-07-30T19:01:15.211Z","updated_at":"2025-03-14T07:32:44.015Z","avatar_url":"https://github.com/josephsurin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Tiled Hexagons\n\n\u003cimg alt=\" \" src=\"./hex.svg\" width=\"180\" align=\"right\" /\u003e\n\n`tiled-hexagons` is a simple React button component set to help you render one or more multiple tessellated hexagon buttons. \n\n\n[![NPM](https://nodei.co/npm/tiled-hexagons.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/tiled-hexagons/)\n\n\n## Live Demo\nCheck out the [live demo](https://josephsurin.github.io/tiled-hexagons) for usage examples!\n\n## Installation\n```\nnpm install tiled-hexagons\n```\n## Importing\n```js\n//ES6 import\nimport { Hexagon, TiledHexagons } from 'tiled-hexagons'\n```\nOR\n```js\n//CommonJS\nconst { Hexagon, TiledHexagons } from 'tiled-hexagons'\n```\n\n## Basic Usage\n#### `\u003cHexagon/\u003e`\n```jsx\nimport { Hexagon } from 'tiled-hexagons'\n\n//function that returns a simple hexagon button\nconst simpleButton = () =\u003e {\n  return (\n    \u003cHexagon\n      sideLength={40}\n      text=\"Hi\"\n      textStyle={{ fill: 'blue' }}\n    /\u003e\n  )\n}\n```\n#### `\u003cTiledHexagons/\u003e`\n```jsx\nimport { TiledHexagons } from 'tiled-hexagons'\n\n//function that returns simple tiled hexagon buttons\nconst simpleTiled = () =\u003e {\n  return (\n    \u003cTiledHexagons\n      tileSideLengths={40}\n      tileTextStyles={{ fill: 'blue' }}\n      tiles={[\n        { text=\"Hi 1\" },\n        { text=\"Hi 2\" },\n        { text=\"Hi 3\" }\n      ]}\n    /\u003e\n  )\n}\n```\nFor more usage examples check out the [live demo](https://josephsurin.github.io/tiled-hexagons).\n\n## Props\n#### `\u003cHexagon/\u003e`\n| Prop | Type | Default | Description |\n| --- | :---: | :---: | --- |\n| sideLength | `number` | `100` | Length in pixels for each **side** of the hexagon |\n| borderRadius | `number` | `12` | Radius of curvature for each corner of the hexagon |\n| fill | `string` | `white` | Colour to fill the hexagon with (use standard CSS conventions) |\n| ⚠️stroke | `string` | `#bbb` | Outline colour for the hexagon |\n| ⚠️strokeWidth | `number` | `0` | Thickness of the outline |\n| elevation | `number` | `12` | Elevation of the hexagon in pixels |\n| shadow | `string` | `#e2e2e2` | Colour of the shadow created by the elevation |\n| img | `string` | ` ` | URL to an image to be displayed (square-ish images work best) |\n| text | `string` | ` ` | Text to be displayed in the hexagon (font sizes similar to the side length work best) |\n| textStyle | `object` | `{}` | Style to be applied to the text (use fill for text colour) |\n| styles | `object` | `{}` | Custom styles to be applied to the hexagon |\n| href | `string` | ` ` | Link to be opened when hexagon is clicked |\n| target | `string` | ` ` | Specifies where to open the href, one of `_blank` `self` `_parent` `_top` _`framename`_ |\n| onClick | `function` | ` ` | Function to be called when the hexagon is clicked |\n\n\n#### `\u003cTiledHexagons/\u003e`\n| Prop | Type | Default | Description |\n| --- | :---: | :---: | --- |\n| tileSideLengths | `number` | `100` | Side length of each hexagon in the grid |\n| tileBorderRadii | `number` | `12` | Border radius of each hexagon in the grid |\n| tileElevations | `number` | `12` | Elevation of each hexagon in the grid |\n| ⚠️tileStrokeWidths | `number` | `0` | Stroke width of each hexagon in the grid |\n| tileGap | `number` | `4` | Spacing in pixels between each adjacent hexagon |\n| tileStyles | `object` | `{}` | Styling to be applied to all hexagons |\n| tileTextStyles | `object` | `{}` | Styling to be applied to the text of all hexagons |\n| maxHorizontal | `number` | `5` | Maximum number of horizontals in a row |\n| tiles | `array` | `[]` | Array of `tile data objects` to be used to generate hexagons |\n\n⚠️ currently experimental and may not work as intended\n\n\n`tile data objects`\n\nNot all properties of `\u003cHexagon/\u003e` are to be placed into a `tile data object` to be used in `\u003cTiledHexagons/\u003e`. The properties that DO carry over and should be placed into a `tile data object` are: `fill` `stroke` `shadow` `img` `text` `textStyle` `styles` `href` `target` `onClick`.\n\n`tileStyles` and `tileTextStyles` apply a general styling to all hexagons, however, they can be overwritten by individual hexagons using `textStyle` and `styles`.\n\n## Custom Styling\nTo customise a hexagon with CSS, pass through a `textStyle` or `styles` prop.\nThe `styles` prop is an object consisting of 3 objects: `normal` `hover` and `active`. The styles defined in each of these 3 objects are applied when the hexagon is in it's normal state, hover state and active state respectively.\nFor example, to make a yellow hexagon turn green when hovered and blue when clicked, you would pass the following object in the `styles` prop.\n```js\n{\n  normal: {\n    fill: 'yellow'\n  },\n  hover: {\n    fill: 'green'\n  },\n  active: {\n    fill: 'blue'\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephsurin%2Ftiled-hexagons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosephsurin%2Ftiled-hexagons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephsurin%2Ftiled-hexagons/lists"}