react-svg-hexagon-grid

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.

<script src="https://unpkg.com/react-svg-hexagon-grid/dist/react-svg-hexagon-grid.min.js"></script>
<!-- or -->
<script src="node_modules/react-svg-hexagon-grid/dist/react-svg-hexagon-grid.min.js"></script>

Usage

import React from "react"
import Hexagon from "react-svg-hexagon"
import HexagonFlip from "react-svg-hexagon-grid"
import HexagonGrid from "react-svg-hexagon-grid"

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