Tiled Hexagons

tiled-hexagons is a simple React button component set to help you render one or more multiple tessellated hexagon buttons.

Live Demo

Check out the live demo for usage examples!

Installation

npm install tiled-hexagons

Importing

//ES6 import
import { Hexagon, TiledHexagons } from 'tiled-hexagons'

OR

//CommonJS
const { Hexagon, TiledHexagons } from 'tiled-hexagons'

Basic Usage

<Hexagon/>

import { Hexagon } from 'tiled-hexagons'

//function that returns a simple hexagon button
const simpleButton = () => {
  return (
    <Hexagon
      sideLength={40}
      text="Hi"
      textStyle={{ fill: 'blue' }}
    />
  )
}

<TiledHexagons/>

import { TiledHexagons } from 'tiled-hexagons'

//function that returns simple tiled hexagon buttons
const simpleTiled = () => {
  return (
    <TiledHexagons
      tileSideLengths={40}
      tileTextStyles={{ fill: 'blue' }}
      tiles={[
        { text="Hi 1" },
        { text="Hi 2" },
        { text="Hi 3" }
      ]}
    />
  )
}

For more usage examples check out the live demo.

Props

<Hexagon/>

| Prop | Type | Default | Description | | --- | :---: | :---: | --- | | sideLength | number | 100 | Length in pixels for each side of the hexagon | | borderRadius | number | 12 | Radius of curvature for each corner of the hexagon | | fill | string | white | Colour to fill the hexagon with (use standard CSS conventions) | | ⚠️stroke | string | #bbb | Outline colour for the hexagon | | ⚠️strokeWidth | number | 0 | Thickness of the outline | | elevation | number | 12 | Elevation of the hexagon in pixels | | shadow | string | #e2e2e2 | Colour of the shadow created by the elevation | | img | string | | URL to an image to be displayed (square-ish images work best) | | text | string | | Text to be displayed in the hexagon (font sizes similar to the side length work best) | | textStyle | object | {} | Style to be applied to the text (use fill for text colour) | | styles | object | {} | Custom styles to be applied to the hexagon | | href | string | | Link to be opened when hexagon is clicked | | target | string | | Specifies where to open the href, one of _blank self _parent _top framename | | onClick | function | | Function to be called when the hexagon is clicked |

<TiledHexagons/>

| Prop | Type | Default | Description | | --- | :---: | :---: | --- | | tileSideLengths | number | 100 | Side length of each hexagon in the grid | | tileBorderRadii | number | 12 | Border radius of each hexagon in the grid | | tileElevations | number | 12 | Elevation of each hexagon in the grid | | ⚠️tileStrokeWidths | number | 0 | Stroke width of each hexagon in the grid | | tileGap | number | 4 | Spacing in pixels between each adjacent hexagon | | tileStyles | object | {} | Styling to be applied to all hexagons | | tileTextStyles | object | {} | Styling to be applied to the text of all hexagons | | maxHorizontal | number | 5 | Maximum number of horizontals in a row | | tiles | array | [] | Array of tile data objects to be used to generate hexagons |

⚠️ currently experimental and may not work as intended

tile data objects

Not all properties of <Hexagon/> are to be placed into a tile data object to be used in <TiledHexagons/>. 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.

tileStyles and tileTextStyles apply a general styling to all hexagons, however, they can be overwritten by individual hexagons using textStyle and styles.

Custom Styling

To customise a hexagon with CSS, pass through a textStyle or styles prop. The 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. For example, to make a yellow hexagon turn green when hovered and blue when clicked, you would pass the following object in the styles prop.

{
  normal: {
    fill: 'yellow'
  },
  hover: {
    fill: 'green'
  },
  active: {
    fill: 'blue'
  }
}