# hexagon-3d-react > React component wrapper round hexagon-3d service for building css hexagons with high interactivity capabilities. Latest version **0.1.6** (published 2023-06-08) · MIT license · 0 weekly downloads ## Install ```sh npm install hexagon-3d-react pnpm add hexagon-3d-react yarn add hexagon-3d-react bun add hexagon-3d-react ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.6 | | Published | 2023-06-08 | | First published | 2023-06-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Node | >=4.2.4 | | Dependencies | 3 | | Unpacked size | 153.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Ievgenii Spitsyn | | Maintainers | ievgeny-spitsyn | | Keywords | Hexagon, 3D, React, Geometry, CSS, Interactivity | ## Links - npm: https://www.npmjs.com/package/hexagon-3d-react - Repository: https://github.com/IevgenySp/hexagon-3d-react - Homepage: https://github.com/IevgenySp/hexagon-3d-react#readme - Issues: https://github.com/IevgenySp/hexagon-3d-react/issues - npm.io page: https://npm.io/package/hexagon-3d-react ## Dependencies (3) - [react](https://npm.io/package/react.md) ^18.2.0 - [hexagon-3d](https://npm.io/package/hexagon-3d.md) ^0.1.6 - [@types/react](https://npm.io/package/@types/react.md) ^18.2.8 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.6 (latest) — 2023-06-08 - 0.1.5 — 2023-06-07 - 0.1.4 — 2023-06-07 - 0.1.3 — 2023-06-06 - 0.1.2 — 2023-06-06 - 0.1.1 — 2023-06-06 - 0.1.0 — 2023-06-06 ## README [![Build Status](https://app.travis-ci.com/IevgenySp/hexagon-3d-react.svg?branch=main)](https://app.travis-ci.com/IevgenySp/hexagon-3d-react) # hexagon-3d-react A React based component wrapper for the [hexagon-3d](https://www.npmjs.com/package/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](https://hexagon.metriker.com/) ### Explanation tutorial You can read more about hexagon geometry, construction features, and package details in my [Medium article](https://medium.com/better-programming/entertaining-web-geometry-building-an-interactive-3d-css-hexagon-a9b5f535d06e). ![alt Samples](./assets/img/HexagonSamples.png) ## 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 (>)`; ### Example of usage `Top} side1Children={

Side1

} side2Children={

Side2

} side3Children={

Side3

} side4Children={

Side4

} side5Children={

Side5

} side6Children={

Side6

} />` ### 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: ![alt Samples](./assets/img/HexagonFaces.jpg) ### Next iterations * Add tooltips for each side * Add more styling capabilities * Add rotations and other animation effects * Add deeper sides interactions * Optimize CSS properties --- _Source: https://npm.io/package/hexagon-3d-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._