Skip to content

josephsurin/tiled-hexagons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tiled Hexagons

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

NPM

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