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

*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