react-svg-hexagon-grid
A React component to render a responsive CSS grid of SVG hexagons.
HexagonGrid can contain Hexagon and Hexagon-flip components and every hexagon must have same height and width.
Example
Getting started
You can download react-svg-hexagon-grid
from the NPM registry via the npm
or yarn
commands
yarn add react-svg-hexagon-grid# or npm install react-svg-hexagon-grid --save
If you don't use package manager and you want to include react-svg-hexagon-grid
directly in your html, you could get it from the UNPKG CDN or from the local UMD build.
<!-- or -->
Usage
const App = <HexagonGrid> <Hexagon /> <Hexagon /> <Hexagon /> <Hexagon /> <Hexagon /> <Hexagon>/* Content */</Hexagon> <HexagonFlip> <Hexagon>/* Recto content */</Hexagon> <Hexagon>/* Verso content */</Hexagon> </HexagonFlip> </HexagonGrid>
Props
Name | PropType | Description | Default |
---|---|---|---|
gap | PropTypes.number | Gap in pixel between hexagons | 30 |
Contributing
- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
yarn test
).
See CONTRIBUTING.md guidelines
Changelog
See CHANGELOG.md
License
This project is licensed under the MIT License - see the LICENCE.md file for details