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/>

<TiledHexagons/>

⚠️ 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'
  }
}