tiled-hexagons v1.0.2
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'
}
}