hexagon-3d-react

A React based component wrapper for the hexagon-3d service. Hexagon-3d providing styles object for CSS-based 3d hexagons with high interactivity capabilities. You may use these shapes as skeletons for various animations, images adding, videos playing, combining them into different forms, and doing a lot of other things. The capabilities of hexagons will be growing over time.

Live demo:

Hexagon3D

Explanation tutorial

You can read more about hexagon geometry, construction features, and package details in my Medium article.

Installation

npm install hexagon-3d-react

Usage

import Hexagon3D from 'hexagon-3d';

or

const Hexagon3D = require('hexagon-3d').default;

After importing hexagon service is ready to be used as a regular React component:

render (<Hexagon3D <parameters>>);

Example of usage

`<Hexagon3D
    width={130}
    height={150}
    rotateZ={20}
    rotateX={40}
    growTop={true}
    topChildren={<h1><span>Top</span></h1>}
    side1Children={<h1><span>Side</span><span>1</span></h1>}
    side2Children={<h1><span>Side</span><span>2</span></h1>}
    side3Children={<h1><span>Side</span><span>3</span></h1>}
    side4Children={<h1><span>Side</span><span>4</span></h1>}
    side5Children={<h1><span>Side</span><span>5</span></h1>}
    side6Children={<h1><span>Side</span><span>6</span></h1>}
/>`

Parameters

Name	Type	Description	Values
width	number	Width of the hexagon (the biggest distance of it's 2 opposite points)	any
height	number	Height of the hexagon sides	any
rotateZ	number	Rotation degrees round Z axis	0-360
rotateX	number	Rotation degrees round X axis	0-360
showShadow	boolean	Flag to indicate whether faces border shadow should be shown (default - false)	true, false
shadowColor	string	Color of a faces border shadow	any
growTop	boolean	Flag which indicates how hexagone should change it's height - to the top or to the bottom. (default - false)	true, false
topBottomColor	string	Color of hexagon top and bottom sides	any
sidesColor	string	Color of hexagon sides	any
opacity	number	Opacity of hexagon sides	0.0 - 1.0
showTransition	boolean	Indicate whether height change animation should be shown (default - false)	true, false
topChildren	HTML, string	HTML element or string which will be placed on the top side of the hexagon	any
side1Children	HTML, string	HTML element or string which will be placed on the side 1* of the hexagon	any
side2Children	HTML, string	HTML element or string which will be placed on the side 2* of the hexagon	any
side3Children	HTML, string	HTML element or string which will be placed on the side 3* of the hexagon	any
side4Children	HTML, string	HTML element or string which will be placed on the side 4* of the hexagon	any
side5Children	HTML, string	HTML element or string which will be placed on the side 5* of the hexagon	any
side6Children	HTML, string	HTML element or string which will be placed on the side 6* of the hexagon	any
bottomChildren	HTML, string	HTML element or string which will be placed on the bottom side of the hexagon	any

*Hexagon sides direction:

Next iterations

• Add tooltips for each side
• Add more styling capabilities
• Add rotations and other animation effects
• Add deeper sides interactions
• Optimize CSS properties